摘要：因?yàn)橹?，如果函?shù)沒有返回值，則會(huì)默認(rèn)返回。抽象類在運(yùn)行時(shí)是可見的，可以通過判斷。接口只能描述類的公共部分，不會(huì)檢查私有成員，而抽象類沒有這樣的限制。

本片文章主要講述了TypeScript的基礎(chǔ)知識(shí)點(diǎn)，這些是我個(gè)人的理解，如有不正確的地方請(qǐng)?jiān)u論斧正！

文章以下面的順序講解：

變量類型

函數(shù)

類

接口

泛型

命名空間

在開始之前我們先裝環(huán)境：

npm i typescript -g //全局安裝typescript

npm init -y //進(jìn)入文件夾，初始化項(xiàng)目，生成package.json文件

tsc --init //創(chuàng)建tsconfig.json文件

npm i @types/node -S //這個(gè)主要是解決模塊的聲明文件問題

環(huán)境到此安裝結(jié)束；

一，變量類型

1.number 類型

let num1 : number = 20;
let num2 : number = 175.5;
let a1 : number = Infinity; //正無窮大
let a2 : number = -Infinity; //負(fù)無窮小
let a3 : number = NaN;

注意：Infinity, -Infinity, NaN 也屬于Number類型

2.undefined 類型

let un : undefined = undefined;

注意：

undefined 類型的數(shù)據(jù)只能被賦值為 undefined

在 typescript中，已聲明未初始化的值要直接訪問的話，類型需要定義為undefined

3.null 類型

let nu : null = null;

注意：

null 類型只能被被賦值為null

null是一個(gè)空指針對(duì)象，undefined是未初始化的變量，所以，可以把undefined看成一個(gè)空變量，把unll看成一個(gè)空對(duì)象。

特別注意： 默認(rèn)情況下，undefined 和 null 類型，是所有其它類型的子類型，也可以說成，它倆可以給所有其他類型賦值。

4.string 類型

//值類型
let str : string = "你好！"
//引用類型
let str1 : String = new String("你好！")

5. boolean 類型

let boo : boolean = true;
let boo1 : boolean = false

6.symbol 類型

let sy : symbol = Symbol("bar");

注意： symbol類型的值是通過Symbol構(gòu)造函數(shù)創(chuàng)建的。

7. 數(shù)組類型

//字面量
let arr1 : number[] = [1, 2]

//泛型---->相當(dāng)于數(shù)組中每個(gè)元素的類型
let arr2 : Array = ["a", "s"]

//構(gòu)造函數(shù)
let arr3 : string[] = new Array("a", "s")

//聯(lián)合類型-->這里的聯(lián)合類型的意思是，數(shù)組中元素的類型可以是number 或 string，兩種都有也可以
let arr4 : Array = [2, "a"]

8.元組類型（tuple）

let tup : [string,number] = ["asdasd", 43233];

注意：

元組和數(shù)組看起來有點(diǎn)類似，但是，是有區(qū)別的

元組的長(zhǎng)度是有限的，而且分別為每一個(gè)元素定義了類型

9. 枚舉類型（enum）

enum--->組織收集一組相關(guān)變量的方式。

數(shù)字枚舉

enum REN {
    // nan = 1 ----->初始化下標(biāo)
    nan,
    nv,
    yao
}
console.log(REN.nan)//0
console.log(REN.nv)//1
console.log(REN.yao)//2
//使用數(shù)字枚舉時(shí)，TS 會(huì)為枚舉成員生成反向映射
console.log(REN[2])// yao

注意：

數(shù)字的枚舉---->下標(biāo)從0開始,也可以自行設(shè)置枚舉成員的初始值，它們會(huì)依次遞增

字符串枚舉

enum SIJI {
    chun = "春",
    xia = "夏",
    qiu = "秋",
    dong = "冬"
}

console.log(SIJI.chun)//春
console.log(SIJI.xia)//夏
console.log(SIJI.qiu)//秋
console.log(SIJI.dong)//冬

注意：

字符串枚舉類型允許使用字符串來初始化枚舉成員，可以是一個(gè)字符串字面量或者另一個(gè)字符串的枚舉成員

字符串枚舉類型不支持成員自增長(zhǎng)，每個(gè)成員必須初始化，另外字符串枚舉不會(huì)為成員生成發(fā)向映射

10. void 類型

void 類型--->表示沒有任何返回值，一般用于定義方法時(shí)方法沒有返回值

function f1() : void {
    console.log("void類型")
}

注意：

這里你也可以指定返回值類型為 undefined。因?yàn)?JS 中，如果函數(shù)沒有返回值，則會(huì)默認(rèn)返回 undefind。不過，使用 void 類型可以使表意更清晰。

11. any 類型

注意： 其他類型都是any類型的子類型 ，any類型的值可以被賦值為任何類型的值

let an : any = "any 類型";
console.log(an)//any 類型
an = 25;
console.log(an)//25

注意：對(duì)于any 需要注意兩點(diǎn)

如果在聲明變量時(shí)，沒有聲明其類型，也沒有初始化，（因?yàn)轭愋屯茢鄷?huì)自動(dòng)判斷類型），那么它就會(huì)被判斷為any類型

let an1;
an1 = "沒有聲明其類型，也沒有初始化";
console.log(an1)//沒有聲明其類型，也沒有初始化
an1 = 25
console.log(an1)//25

在any類型變量上可以訪問任何屬性，即使它不存在

let something: any = 42
something.mayExist()    // 沒問題，因?yàn)槠淇赡茉谶\(yùn)行時(shí)存在
something.toFixed() // 沒問題，雖然確實(shí)存在，但是編譯器并不會(huì)去檢查

12. never 類型

注意：

never 表示永遠(yuǎn)不會(huì)存在的值的類型， never 是任何類型的子類型，但是 沒有任何類型是never的子類型或可以賦值給never類型（除了never本身之外）。 即使 any也不可以賦值給never。

never 類型常用于兩種情況

用于描述從不會(huì)有返回值的函數(shù)---》返回never的函數(shù)必須存在無法達(dá)到的終點(diǎn)

function f5() : never {
    while (true) {
         // do something
     }
 }

用于描述總拋出錯(cuò)誤的函數(shù)

function f2(msg : string) : never {
    throw new Error(msg)
}

13. 日期類型

let da : Date = new Date()
console.log(da)

14. 正則表達(dá)式類型

//構(gòu)造函數(shù)聲明法
let reg1 : RegExp = new RegExp("ljy","gi")
console.log(reg1)

//字面量的聲明法
let reg2 : RegExp = /ljy/gi
console.log(reg2)

二， 函數(shù)

1. 函數(shù)定義

定義函數(shù)有函數(shù)聲明和函數(shù)表達(dá)式兩種形式。定義函數(shù)的參數(shù)和返回值可以指定其類型；當(dāng)調(diào)用函數(shù)時(shí)，傳入?yún)?shù)類型必須與定義函數(shù)參數(shù)類型保持一致。

函數(shù)聲明定義

//            參數(shù)類型    返回值類型
function f(age:number) : string {
    return `找到了${age}的小哥哥`;
}

let age : number = 22;
let res : string = f(age);
console.log(res)

函數(shù)表達(dá)式定義

let f1 = (age:number) : string => {
    return `找到了${age}的小哥哥`;
}
let age1 :number = 21;
let res1 : string = f1(age1);
console.log(res1)

注意：表達(dá)式定義完以后，必須調(diào)用函數(shù)

函數(shù)表達(dá)式還有一種寫法： 函數(shù)表達(dá)式：指定變量fn的類型

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>

在 TypeScript 的類型定義中，=> 用來表示函數(shù)的定義，左邊是輸入類型，需要用括號(hào)括起來，右邊是輸出類型。

// let fn: (x: Type, y: Type) => Type = (x, y) => {}

//例子
var run3: (x: number, y: number) => string = function(x: number, y: number): string{
    return "run3";
}
console.log(run3(1, 2))


//當(dāng)給變量run3指定類型的時(shí)候，應(yīng)該是函數(shù)的參數(shù)和返回值的約束類型。如果用后面學(xué)到的ts類型推論，可以簡(jiǎn)寫為：

var run4: (x: number, y: number) => string = function(x, y){ 
// 類型推論可以確定函數(shù)的參數(shù)和返回值類型，也就可以省略類型指定
    return "run4";
}
console.log(run4(1, 2))

2. 函數(shù)沒有返回值可以使用void類型值定返回值

function  f3() : void {
    console.log("沒有返回值")
}
f3()

3. 可選參數(shù)的函數(shù)

注意：可選參數(shù)一定要放在參數(shù)的最后面

function f4(age:number, cm?:number) : string {
    //cm為可選參數(shù)，可傳可不傳
    if (cm) {
        return `可選參數(shù)------身高為${cm}厘米`;
    } else {
        return `可選參數(shù)-----年齡${age}歲`
    }
}
console.log(f4(12))
console.log(f4(24, 175))

4. 有默認(rèn)值參數(shù)的函數(shù)

注意：ts會(huì)將添加了默認(rèn)值的參數(shù)識(shí)別為可選參數(shù)，有默認(rèn)值的參數(shù)的位置不受【可選參數(shù)必須放在后面】的限制

function f5(age:number, cm:number = 188) : string {
    return `默認(rèn)參數(shù)----年齡為${age}歲---身高為${cm}cm`
}
console.log(f5(25))

5. 剩余參數(shù)的函數(shù)

//當(dāng)有很多參數(shù)的時(shí)候，或者參數(shù)個(gè)數(shù)不確定，可以用三點(diǎn)運(yùn)算符
function f6(...rest:number[]) : number[] {
    return [...rest];
}
console.log(f6(1,2,3,4,5,6,7,8,9))

function f7(a:number, b:number, ...rest:number[]) : number[] {
    return [a, b, ...rest]
}

console.log(f7(100,200,1,2,3,4,5,6))

6. 接口中的函數(shù)

第一種寫法

interface int1 {
    say (age:number) : void  //抽象方法
}

第二種寫法

interface int2 {
    say : (age:number) => void  //抽象方法
}

7.函數(shù)的重載

注意：

先聲明所有方法重載的定義，不包含方法的實(shí)現(xiàn)

再聲明一個(gè)參數(shù)為any類型的重載方法

實(shí)現(xiàn)any類型的方法并通過參數(shù)類型（和返回類型）不同來實(shí)現(xiàn)重載

typescript中的重載：通過為同一個(gè)函數(shù)提供多個(gè)函數(shù)類型定義來實(shí)現(xiàn)多種功能的目的

TypeScript 會(huì)優(yōu)先從最前面的函數(shù)定義開始匹配，所以多個(gè)函數(shù)定義如果有包含關(guān)系，需要優(yōu)先把精確的定義寫在前面。

function f1(x: number, y: number): number;
function f1(x: string, y: string): string;

// 上面定義函數(shù)的格式，下面定義函數(shù)的具體實(shí)現(xiàn)
function f1(x: any, y: any): any {
    return x + y;
}

f1(1, 2);
f1("a", "b");

三， 類

1. 訪問修飾符

public：公共修飾符

注意：

表示屬性或方法都是公有的，在類的內(nèi)部，子類的內(nèi)部，類的實(shí)例都能被訪問,默認(rèn)情況下，為public

class People {
    public name : string
     constructor (name:string) { //構(gòu)造函數(shù)必須寫
        this.name = name
    }
    public say () :void {
        console.log("你好")
    }
}

private 私有修飾符

注意：

表示在當(dāng)前類中可以訪問，子類，外部類不可以訪問

class People {
    private name : string
     constructor (name:string) { //構(gòu)造函數(shù)必須寫
        this.name = name
    }
    private say () :void {
        console.log("你好")
    }
}

protected 保護(hù)類型

注意：

表示在當(dāng)前類中和子類中可以訪問，外部類不可以訪問

class People {
    protected name : string
     constructor (name:string) { //構(gòu)造函數(shù)必須寫
        this.name = name
    }
    protected say () :void {
        console.log("你好")
    }
}

注意：

TypeScript 只做編譯時(shí)檢查，當(dāng)你試圖在類外部訪問被 private 或者 protected 修飾的屬性或方法時(shí)，TS 會(huì)報(bào)錯(cuò)，但是它并不能阻止你訪問這些屬性或方法。

readonly 只讀修飾符

注意：

表示某個(gè)屬性是只讀的，不能被修改

class People {
    readonly name : string
     constructor (name:string) { //構(gòu)造函數(shù)必須寫
        this.name = name
    }
}

2. 聲明類

class People {
    name : string //默認(rèn)為public
    age : number
    constructor (name:string, age:number) { //構(gòu)造函數(shù)必須寫
        this.name = name
        this.age = age
    }
    say () :void {
        console.log("你好")
    }
}

const HH : People = new People("含含", 21)
console.log(HH.name)
console.log(HH.age)
HH.say()

3. 類的繼承

class Student extends People {
     cm : number
    constructor (name:string, age:number, cm:number) {
        super(name, age) //super 繼承父類的構(gòu)造函數(shù)，并向構(gòu)造函數(shù)傳參，super必須寫在第一行
        this.cm = cm
    }
    work () : void {
        console.log("學(xué)習(xí)")
    }
}

const  stu1 : Student = new Student("liu", 22, 175)
console.log(stu1.name)
console.log(stu1.age)
console.log(stu1.cm)
stu1.say()
stu1.work()

4. 靜態(tài)屬性和靜態(tài)方法

注意：

靜態(tài)方法和靜態(tài)屬性必須使用類名調(diào)用

靜態(tài)屬性和靜態(tài)方法在實(shí)例化之前就已經(jīng)存在

class People {
    static name1 : string = "靜態(tài)屬性";
    static say () :void {
        console.log("靜態(tài)方法")
    }
}
console.log(People.name1)
People.say()

注意：靜態(tài)方法調(diào)用不了實(shí)例化方法和實(shí)例化屬性，因?yàn)殪o態(tài)域加載是在解析階段，而實(shí)例化是在初始化階段，（java原理），所以靜態(tài)方法里面不能調(diào)用本類的方法和屬性，可以調(diào)用靜態(tài)屬性和靜態(tài)方法

5. 多態(tài)

多態(tài)---->重寫方法

父類定義一個(gè)方法不去實(shí)現(xiàn)，讓繼承它的子類去實(shí)現(xiàn)，每個(gè)子類的該方法有不同的表現(xiàn)

class Animal {
    name : string
    constructor (name:string) {
        this.name = name
    }
    eat () : void {
        //讓它的子類去實(shí)現(xiàn)不同的eat方法
    }
}

class Laohu extends Animal {
    constructor (name:string) {
        super(name)
    }
    eat () : void {
        console.log(`${this.name}吃肉！`)
    }
}

class Laoshu extends Animal {
    constructor (name:string) {
        super(name)
    }
    eat () : void {
        console.log(`${this.name}吃糧食！`)
    }
}
const laohu : Laohu = new Laohu("老虎")
laohu.eat()
const  laoshu : Laoshu = new Laoshu("老鼠")
laoshu.eat()

6. 類和接口

注意：

類可以實(shí)現(xiàn)（implement）接口。通過接口，你可以強(qiáng)制地指明類遵守某個(gè)契約。你可以在接口中聲明一個(gè)方法，然后要求類去具體實(shí)現(xiàn)它。

接口不可以被實(shí)例化，實(shí)現(xiàn)接口必須重寫接口中的抽象方法

interface Play {
    plays (difang:string) : void;
}

class Playy implements Play {
    plays(difang: string): void {
        console.log(`我們要去${difang}玩?。?！`)
    }
}

const pl : Playy = new Playy();
pl.plays("北京")

注意：類和接口的區(qū)別

類可以實(shí)現(xiàn)（implement）多個(gè)接口，但只能擴(kuò)展（extends）自一個(gè)抽象類。

抽象類中可以包含具體實(shí)現(xiàn)，接口不能。

抽象類在運(yùn)行時(shí)是可見的，可以通過 instanceof判斷。接口則只在編譯時(shí)起作用。

接口只能描述類的公共（public）部分，不會(huì)檢查私有成員，而抽象類沒有這樣的限制。

7. 抽象類和抽象方法

注意：

用abstract關(guān)鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實(shí)現(xiàn)并且必須在派生類(抽象類的子類)中實(shí)現(xiàn)

抽象類：它是提供其他類繼承的基類，不能直接被實(shí)例化，子類繼承可以被實(shí)例化

abstract修飾的方法(抽象方法)只能放在抽象類里面

抽象類和抽象方法用來定義標(biāo)準(zhǔn)(比如定義標(biāo)準(zhǔn)為：抽象類Animal有抽象方法eat，要求它的子類必須包含eat方法)

abstract class People {
    name : string
    constructor (name:string) {
        this.name = name
    }
    abstract eat (food:string) :void;//抽象方法不包括具體實(shí)現(xiàn)，并且必須再派生類中實(shí)現(xiàn)
}

class Stud1 extends People {
    //抽象類的子類必須實(shí)現(xiàn)抽象類中的抽象方法
    constructor (name:string) {
        super(name)
    }
    eat(food: string): void {
        console.log(`我愛吃${food}`)
    }

}

const stu11 : Stud1 = new Stud1("liu")
stu11.eat("面條")

四，接口

注意：

接口定義：接口是對(duì)傳入?yún)?shù)進(jìn)行約束；或者對(duì)類里面的屬性和方法進(jìn)行聲明和約束，實(shí)現(xiàn)這個(gè)接口的類必須實(shí)現(xiàn)該接口里面屬性和方法；typescript中的接口用interface關(guān)鍵字定義。

接口作用：接口定義了某一批類所需要遵守的規(guī)范，接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類里方法的實(shí)現(xiàn)細(xì)節(jié)，它只規(guī)定這批類里必須提供某些方法，提供這些方法的類就可以滿足實(shí)際需要。typescrip中的接口類似于java，同時(shí)還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等。

1. 屬性接口

對(duì)傳入對(duì)象的約束，也就是json數(shù)據(jù)

interface Sx {
    name : string
    age : number
}

function f8(peop:Sx) {
    //name age 必須傳遞
    console.log(peop)
}

const obj = {
    name : "liu",
    age : 25
}
f8(obj)

2. 函數(shù)類型的接口

對(duì)方法傳入的參數(shù)和返回值進(jìn)行約束

interface Sta {
    (difang : string, todo : string) : string
}

let play : Sta = (difang:string, todo:string) : string => {
    return `我們?nèi)?{difang}吃${todo}`
}

console.log(play("灞橋", "吃燒烤"))

3. 可索引的接口

對(duì)索引和傳入的參數(shù)的約束

//對(duì)數(shù)組的約束
interface UserArr {
    //索引為number，參數(shù)為string
    [index : number] : string
}

const arr : UserArr = ["a", "b"]
console.log(arr)

//對(duì) 對(duì)象的約束
interface UserObj {
    [index : number] : number
}

const obj1 : UserObj = { 2:1, 3:4 }
console.dir(obj1)

4. 類 類型接口

對(duì)類的約束

interface Anmal {
    //對(duì)類里面的屬性和方法進(jìn)行約束
    name : string
    eat (food:string) : void
}
//類實(shí)現(xiàn)接口要用implements , 子類必須實(shí)現(xiàn)接口里面聲明的屬性和方法
class Laoshu implements Anmal{
    name : string
    constructor (name : string) {
        this.name = name
    }
    eat(food:string):void {
        console.log(`${this.name}吃${food}`)
    }
}
const lao : Laoshu = new Laoshu("老鼠")
lao.eat("糧食")

5. 接口繼承

//父類Anmal看上面
//實(shí)現(xiàn)LaoHu的這個(gè)接口，必須也要實(shí)現(xiàn)LaoHu繼承的Anmal接口中的方法
interface LaoHu extends Anmal{
    say (sa : string) : void
}
//繼承并實(shí)現(xiàn)接口
class XiaoLaoHu implements LaoHu{
    name : string
    constructor (name : string) {
        this.name = name
    }
    eat (food : string) : void {
        console.log(`${this.name}吃${food}`)
    }
    say(sa: string): void {
        console.log(`${this.name}說${sa}`)
    }
}

const xiao : XiaoLaoHu = new XiaoLaoHu("老虎")
xiao.eat("肉")
xiao.say("你好")

五， 泛型

注意：

很多時(shí)候，類型是寫死的，不利于復(fù)用，泛型可以簡(jiǎn)單的理解為給類型的這種值設(shè)置變量，解決類，接口

方法的復(fù)用性，以及對(duì)不特定數(shù)據(jù)類型的支持

語法 : <類型變量名> 一般是單字母大寫

1. 泛型函數(shù)

函數(shù)再調(diào)用時(shí)，指定泛型T的類型

function f9(value:T) : T {
    //傳入?yún)?shù)類型為T，返回值的類型也為T
    console.log(`我傳入了${value}`)
    return value
}

f9(10)

function f10  (value:T) : any {
    //傳入?yún)?shù)的類型為T，返回任意類型的值
    console.log(`我返回了${value}`)
    return `我返回了${value}`
}

console.log(f10("我是ljy"))

2. 泛型類

泛型類，使用 < > 跟在類名后面

class Ni  {
    name : T
    constructor (name : T) {
        this.name = name
    }
    say (value : T) : any {

        return `${this.name}說${value}`
    }
}

const ni1 = new Ni("ljy")//實(shí)例化類，指定類的類型是string
console.log(ni1.say("你好"))

const ni2 = new Ni(20)//實(shí)例化類，指定類的類型是number
console.log(ni2.say(23))

3. 泛型接口

第一種

interface Niniubi {
     (value:T) : any
}

let fff : Niniubi = (value : T) : any => {
    return `我傳入了${value}`
}
console.log(fff(25))
console.log(fff("ljy"))

第二種

interface ConfigFnTwo{
    (value:T):T;
}
function setDataTwo(value:T):T{
    return value
}
var setDataTwoFn:ConfigFnTwo = setDataTwo
setDataTwoFn("name");

六，命名空間

namespace Shuaige {
    export class DeHua {
        public name : string = "劉德華"
        say () {
            console.log(`我是${this.name}`)
        }
    }
}

namespace Bajie {
    export class DeHua {
        public name : string = "馬德華"
        say () {
            console.log(`我是${this.name}`)
        }
    }
}


const de : Shuaige.DeHua = new Shuaige.DeHua()
de.say()

const de1 : Bajie.DeHua = new Bajie.DeHua()
de1.say()

本人經(jīng)過閱讀，ts官方文檔，jspang的ts教程，Hopsken的ts教程，Staticy的ts教程，才入門的，再此感謝！