TypeScript

TypeScript簡稱TS，TS和JS之間的關系其實就是Less/Sass和CSS之間的關系，就像Less/Sass是對CSS進行擴展一樣，TS也是對JS進行擴展，就像Less/Sass最終會轉換成CSS一樣，我們編寫好的TS代碼最終也會換成JS。

因為JavaScript是弱類型，很多錯誤只有在運行時才會被發現，而TypeScript是強類型，它提供了一套靜態檢測機制，可以幫助我們在編譯時就發現錯誤。

TypeScript特點

支持最新的JavaScript新特特性；支持代碼靜態檢查；支持諸如C、C++、Java、Go等后端語言中的特性(枚舉、泛型、類型轉換、命名空間、聲明文件、類、接口等)。

---

配置webpack打包ts

1.初始化一個自動打包的webpack項目
2.通過tsc --init初始化TypeScript配置文件 (自動生成tsconfig.json)
3.通過npm install typescript ts-loader安裝對應loader
4.修改webpack配置文件
entry: "./src/js/index.ts",
resolve: {
    extensions: [ '.tsx', '.ts', '.js' ] // 支持識別ts文件
},
rules: [
    { // ts編譯配置
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
    }
]

---

基礎類型

TypeScript支持與JavaScript幾乎相同的數據類型，此外還提供了實用的枚舉類型方便我們使用。

數值類型 number： let val1:number; 定義了一個名稱叫做val1的變量, 這個變量中將來只能存儲數值類型的數據
布爾類型 boolean：let val2:boolean;
字符串類型 string：let val3:string;
數組類型Array：let arr1:Array<number>; arr1 = [1, 3]; let arr2:string[]; arr2 = ['a', 'b'];
聯合類型 |：let arr3:(number | string)[]; 表示定義了一個名稱叫做arr3的數組, 這個數組中既可以存儲數值類型也可以存儲字符串類型。arr3 = [1, 'b', 2, 'c'];
任意類型 any：
元祖類型：TS中的元祖類型其實就是數組類型的擴展，元祖用于保存定長定數據類型的數據。let arr5:[string, number, boolean]; 表示定義了一個名稱叫做arr5的元祖, 這個元祖中將來可以存儲3個元素, 第一個元素必須是字符串類型, 第二個元素必須是數字類型, 第三個元素必須是布爾類型
void類型：void與any正好相反, 表示沒有任何類型, 一般用于函數返回值。 在TS中只有null和undefined可以賦值給void類型

注意點: null和undefined是所有類型的子類型, 所以我們可以將null和undefined賦值給任意類型

---

擴展類型

枚舉類型

枚舉類型是TS為JS擴展的一種類型，在原生的JS中是沒有枚舉類型的，枚舉用于表示固定的幾個取值。TS中的枚舉底層實現的本質其實就是數值類型。

注意點: TS中的枚舉類型的取值，默認是從上至下從0開始遞增的，雖然默認是從0開始遞增的，但是我們也可以手動的指定枚舉的取值的值；如果手動指定了前面枚舉值的取值，那么后面枚舉值的取值會根據前面的值來遞增。

enum Gender{
    Male,
    Femal
}
let val:Gender;
val = Gender.Male;
// val = 'nan'; // 報錯
// val  = false;// 報錯
// 注意點: TS中的枚舉底層實現的本質其實就是數值類型, 所以賦值一個數值不會報錯
// val = 666; // 不會報錯
console.log(Gender.Male); // 0
console.log(Gender.Femal);// 1
// 我們通過它對應的數據拿到它的枚舉值
console.log(Gender[0]); // Male

TS中支持兩種枚舉，一種是數字枚舉，一種是字符串枚舉。

字符串枚舉

和數字枚舉不一樣，字符串枚舉不能使用常量或者計算結果給枚舉值賦值， 但是它可以使用內部的其它枚舉值來賦值；如果使用字符串給前面的枚舉值賦值了, 那么后面的枚舉值也必須手動賦值。

enum Gender{
    Male = 'www.baidu.com',
    Female = 'www.taobao.com',
    Yao = Female
}
console.log(Gender.Female);
console.log(Gender.Yao);

枚舉反向映射

可以根據枚舉值獲取到原始值，也可以根據原始值獲取到枚舉值。

enum Gender{
    Male,
    Female
}
console.log(Gender.Male); // 0
console.log(Gender[0]); // Male

異構枚舉

枚舉中既包含數字又包含字符串，我們就稱之為異構枚舉。

enum Gender{
    Male = 6,
    Female = 'nv'
}
console.log(Gender.Male); // 6
console.log(Gender.Female); // nv
console.log(Gender[6]); // Male
// console.log(Gender['nv']); // 如果是字符串枚舉, 那么無法通過原始值獲取到枚舉值

枚舉成員類型

以把枚舉成員當做類型來使用。

enum Gender{
    Male,
    Female
}
interface TestInterface {
    age: Gender.Male
}
class Person implements TestInterface{
    age: Gender.Male
    // age: Gender.Female // 由于類型不匹配, 所以會報錯
    // age: 0 // 由于數字枚舉的本質就是數值, 所以這里寫一個數值也不會報錯

//////////////////  如果是字符串枚舉  //////////////////
    // age: Gender.Male
    // age: Gender.Female  // 報錯
    // age: 'www.baidu.com' // 如果是字符串枚舉, 那么只能是枚舉成員的值, 不能是其它的值，報錯
    // age: string // 報錯
}

聯合枚舉類型

聯合類型就是將多種數據類型通過|連接起來，我們可以把枚舉類型當做一個聯合類型來使用。

enum Gender{
    Male ,
    Female
}
interface TestInterface {
     age: Gender // 會轉化為聯合枚舉類型：age: (Gender.Male | Gender.Female)
}
class Person implements TestInterface{
    // age: Gender.Male
    age: Gender.Female
}

運行時枚舉

枚舉在編譯之后是一個真實存儲的對象，所以可以在運行時使用。 而像接口這種只是用來做約束做靜態檢查的代碼，編譯之后是不存在的。

常量枚舉

普通枚舉和常量枚舉的區別：普通枚舉會生成真實存在的對象；常量枚舉不會生成真實存在的對象, 而是利用枚舉成員的值直接替換使用到的地方。

const enum Gender2{ // 不加const就是普通枚舉
    Male,
    Female
}
console.log(Gender2.Male === 0); // 編譯后變成 console.log(0 /* Male */ === 0);

枚舉底層實現原理

var Gender;
(function (Gender) {
 // Gender[key] = value;
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Femal"] = 1] = "Femal";
})(Gender || (Gender = {}));
// 原理所表示的相當于：
let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";

Never類型

Never類型 表示的是那些永不存在的值的類型，一般用于拋出異常或根本不可能有返回值的函數。

function demo():never {
    throw new Error('報錯了');
}
function demo2():never {
    while (true){}
}

Object類型 表示一個對象，let obj:object;。

---

類型斷言

TS中的類型斷言和其它編程語言的類型轉換很像，可以將一種類型強制轉換成另外一種類型；類型斷言就是告訴編譯器不需要檢查我們指定的語法

例如: 我們拿到了一個any類型的變量，但是我們明確的知道這個變量中保存的是字符串類型，此時我們就可以通過類型斷言告訴編譯器，這個變量是一個字符串類型，此時我們就可以通過類型斷言將any類型轉換成string類型，使用字符串類型中相關的方法了。

// 使用方式1
let str:any = 'test';
let len = (<string>str).length;
// 使用方式2
let len = (str as string).length;
// 第一種方式有兼容性問題, 在使用到了JSX的時候兼容性不是很好，推薦使用as來進行類型轉換(類型斷言)

---

接口類型

和number、string、boolean、enum這些數據類型一樣，接口也是一種類型，也是用來約束使用者的。

// 定義一個接口類型
interface FullName{
    firstName:string
    lastName:string
}
let obj = {
    firstName:'Jonathan',
    lastName:'Lee'
    // lastName:18
};
function say({firstName, lastName}:FullName):void {
    console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(obj);

注意點：如果使用接口來限定了變量或者形參，那么在給變量或者形參賦值的時候，賦予的值就必須和接口限定的一模一樣才可以，多一個或者少一個都不行。

可選屬性

參數傳遞少一個或多個可以使用可選屬性 ?

// 定義一個接口
interface FullName{
    firstName:string
    lastName:string
    middleName?:string  // ?: 可選屬性，使用接口的函數，參數可傳可不傳
    [propName:string]:any
}
function say({firstName, lastName, middleName}:FullName):void {...}

參數傳遞多一個或者多多個

// 方式一: 使用類型斷言
say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'} as FullName);
// 方式二: 使用變量  不推薦
let obj = {firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'};
say(obj);
// 方式三: 使用索引簽名
interface FullName{
    firstName:string
    lastName:string
    middleName?:string
    [propName:string]:any // 表示 key 為 string類型，值any類型
}
function say({firstName, lastName, middleName}:FullName):void {...}
say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc', 123:123, def:"def"});
// 對象中key默認會給你轉成字符串

索引簽名

索引簽名用于描述那些“通過索引得到”的類型，比如arr[10]或obj["key"]。

interface FullName {
    [propName:string]:string
}
let obj:FullName = { // 注意點: 只要key和value滿足索引簽名的限定即可, 無論有多少個都無所謂
    firstName:'Jonathan',
    lastName:'Lee',
    // middleName:false // 報錯
    // false: '666' // 無論key是什么類型最終都會自動轉換成字符串類型, 所以沒有報錯
}
interface stringArray {
    [propName:number]:string
}
let arr:stringArray = {
    0:'a',
    1:'b'
};

只讀屬性

readonly 讓對象屬性只能在對象剛剛創建的時候修改其值。

interface FullName {
    firstName:string
    readonly lastName:string
}
let myName:FullName = {
    firstName: 'Jonathan',
    lastName: 'Lee'
};
myName.lastName = 'Wang'; // 報錯

只讀數組

ReadonlyArray

let arr2:ReadonlyArray<string> = ['a', 'b', 'c'];

函數接口

可以使用接口來限定函數

interface SumInterface {
    (a:number, b:number):number
}
let sum:SumInterface = function (x:number, y:number):number {
    return x + y;
}
let res = sum(10, 20); // 30

混合類型接口

約定的內容中既有對象屬性，又有函數。

// 定義一個函數實現變量累加
let demo = (()=>{ // 使用閉包確實可以解決污染全局空間的問題, 但是不太友好
    let count = 0;
    return ()=>{
        count++;
        console.log(count);
    }
})();
demo();
demo();
// 在JS中函數的本質就是一個對象
let demo = function () {
    demo.count++; // 函數對象里面還有屬性
}
demo.count = 0;
demo();
demo();
// ts寫法：混合類型接口
// CountInterface 接口要求數據既要是一個沒有參數沒有返回值的函數，又要是一個擁有count屬性的對象；fn作為函數的時候符合接口中函數接口的限定 ():void，fn作為對象的時候符合接口中對象屬性的限定  count:number
interface CountInterface {
    ():void
    count:number
}
let getCounter = function ():CountInterface {
    let fn = <CountInterface>function () { // 使用類型斷言，避免fn.count++報錯
        fn.count++;
        console.log(fn.count);
    }
    fn.count = 0;
    return fn;
};
getCounter();
getCounter();

接口的繼承

TS中的接口和JS中的類一樣是可以繼承的。

interface WidthInterface {
    number
}
interface HeightInterface {
    height:number
}
interface RectInterface extends WidthInterface,HeightInterface {
    // number
    // height:number
    color:string
}
let rect:RectInterface = {
    20,
    height:30,
    color:'red'
}

---

函數

TS中的函數大部分和JS相同；

命名函數

function say1(name) {
    console.log(name);
}
// ts
function say1(name:string):void {
    console.log(name);
}

匿名函數

let say2 = function (name) {
    console.log(name);
}
let say2 = function (name:string):void {
    console.log(name);
}

箭頭函數

let say3 = (name) => {
    console.log(name);
}
let say3 = (name:string):void =>{
    console.log(name);
}

函數聲明和重載

在TS中函數的完整格式應該是由函數的定義和實現兩個部分組成的。

函數聲明

// js定義一個函數
let AddFun:(a:number, b:number)=>number;
// 根據定義實現函數
AddFun = function (x:number, y:number):number {
    return x + y;
};
let res = AddFun(10, 20);

// 一步到位寫法
let AddFun:(a:number, b:number)=>number =
function (x:number, y:number):number {
    return x + y;
};

// 根據函數的定義自動推導對應的數據類型
let AddFun:(a:number, b:number)=>number =
    function (x, y) {
        return x + y;
    };

/////////////////////  TS函數聲明  /////////////////////
// 先聲明一個函數
type AddFun = (a:number, b:number)=>number;
// 再根據聲明去實現這個函數
let add:AddFun = function (x:number, y:number):number {
    return x + y;
};
let add:AddFun = function (x, y) {
    return x + y;
};

函數重載

/////////////////////  TS函數重載  /////////////////////
function getArray(x:number):number[] {
    let arr = [];
    for(let i = 0; i <= x; i++){
        arr.push(i);
    }
    return arr;
}
function getArray(str:string):string[] {
    return str.split('');
}

可選參數

function add(x:number, y:number, z?:number):number {
    return x + y + (z ? z : 0);
}
let res = add(10, 20);
let res = add(10, 20, 30);

可選參數可以配置函數重載一起使用，這樣可以讓函數重載變得更加強大。

function add(x:number, y:number):number; // 函數定義
function add(x:number, y:number, z:number):number; // 函數定義
function add(x:number, y:number, z?:number) { // 函數實現，可選參數可以多個，可選參數后面的參數也必須是可選參數
    return x + y + (z ? z : 0);
}
let res = add(10, 20, 30);

默認參數

function add(x:number, y:number=10):number {
    return x + y;
}
let res = add(10); // 20

剩余參數

function add(x:number, ...ags:number[]) {
    console.log(x);
    console.log(ags);
}
add(10, 20, 30, 40, 50) // 10 20 30 40 50

---

泛型

在編寫代碼的時候我們既要考慮代碼的健壯性，又要考慮代碼的靈活性和可重用性，通過TS的靜態檢測能讓我們編寫的代碼變得更加健壯，但是在變得健壯的同時卻丟失了靈活性和可重用性，所以為了解決這個問題TS推出了泛型的概念。通過泛型不僅可以讓我們的代碼變得更加健壯，還能讓我們的代碼在變得健壯的同時保持靈活性和可重用性。

let getArray = (value:any, items:number = 5):number[]=>{ // 失去ts優勢
    return new Array(items).fill(value);
};
let getArray = <T>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
let arr = getArray<string>('abc');
// 泛型具體的類型可以不指定，如果沒有指定, 那么就會根據我們傳遞的泛型參數自動推導出來
let arr = getArray(6);

泛型約束

默認情況下我們可以指定泛型為任意類型，但是有些情況下我們需要指定的類型滿足某些條件后才能指定，那么這個時候我們就可以使用泛型約束。

interface LengthInterface{
    length:number
}
let getArray = <T extends LengthInterface>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
let arr = getArray<string>('abc');
// let arr = getArray<number>(6); // 報錯

在泛型約束中使用類型參數

一個泛型被另一個泛型約束，就叫做泛型約束中使用類型參數。

let getProps = <T, K extends keyof T>(obj:T, key:K):any=>{ // K必須是T中key
    return obj[key];
}
let obj = {
    a:'a',
}
let res = getProps(obj, "a");
// let res = getProps(obj, "c"); // 報錯，c不是obj中存在的key.

---

類

class Person {
    name:string; // 和ES6區別, 需要先定義實例屬性, 才能夠使用實例屬性
    age:number;
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    say():void{
        console.log(`我的名稱叫${this.name}, 我的年齡是${this.age}`);
    }
    static food:string; // 靜態屬性
    static eat():void{ // 靜態方法
        console.log(`我正在吃${this.food}`);
    }
}
////////////////////////////////////
let p = new Person('lnj', 34);
p.say();
Person.food = '蛋撻';
Person.eat();
////////////////////////////////////
class Student extends Person{
    book:string;
    constructor(name:string, age:number, book:string){
        super(name, age);
        this.book = book;
    }
    say():void{
        console.log(`我是重寫之后的say-${this.name}${this.age}${this.book}`);
    }
    static eat():void{
        console.log(`我是重寫之后的eat-${this.food}`);
    }
}
let stu = new Student('zs', 18, '從零玩轉');
stu.say(); // 我是重寫之后的say-zs18從零玩轉
Student.food = '冰淇淋'; // 我是重寫之后的eat-蛋撻
Student.eat();

類屬性和方法修飾符

public(公開的):
如果使用public來修飾屬性, 那么表示這個屬性是公開的; 可以在類的內部使用, 也可以在子類中使用, 也可以在外部使用

protected(受保護的):
如果使用protected來修飾屬性, 那么表示這個屬性是受保護的; 可以在類的內部使用, 也可以在子類中使用

private(私有的):
如果使用private來修飾屬性, 那么表示這個屬性是私有的; 可以在類的內部使用

readonly(只讀的): 創建類初始化后不許修改

構造函數protected后，該類不能通過new創建實例，但是可以被繼承。

可選屬性

在TS中如果定義了實例屬性, 那么就必須在構造函數中初始化，否則就會報錯。如果想不初始化，就需要設置為可選屬性。和接口中的可選屬性一樣，可傳可不傳的屬性。

class Person {
    name:string;
    age?:number; // 可選屬性
    constructor(name:string, age?:number){
        this.name = name;
        this.age = age;
    }
}
let p = new Person('lnj');

參數屬性

搞定實例屬性的接收和定義，主要用于簡化代碼。

class Person {
    constructor(public name:string, public age:number){ // 不加public，new Person('meihao', 18); 得到的對象為空 
    }
}
let p = new Person('meihao', 18); // p打印出{name: 'meihao', age: 18}
/////////////////////  不使用參數屬性  /////////////////////
class Person {
    name:string;
    age:number;
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
}

類存取器

通過getters/setters來截取對對象成員的訪問。

class Person {
    private _age:number = 0;
    set age(val:number){
        console.log('進入了set age方法');
        if(val < 0){
            throw new Error('人的年齡不能小于零');
        }
        this._age = val;
    }
    get age():number{
        console.log('進入了get age方法');
        return this._age;
    }
}
let p = new Person();
p.age = 34; // 進入了set age方法
// p.age = -6; // 進入了set age方法 人的年齡不能小于零
console.log(p.age);

抽象類

抽象類是專門用于定義哪些不希望被外界直接創建的類的，抽象類一般用于定義基類，抽象類和接口一樣用于約束子類。

抽象類和接口區別：接口中只能定義約束，不能定義具體實現，而抽象類中既可以定義約束，又可以定義具體實現。

abstract class Person {
    abstract name:string;
    abstract say():void;
    eat():void{
        console.log(`${this.name}正在吃東西`);
    }
}
class Student extends Person{
    name:string = 'test';
    say():void{
        console.log(`我的名字是${this.name}`);
    }
}
let stu = new Student();
stu.say(); // 我的名字是test
stu.eat(); // test正在吃東西

類和接口

類"實現"接口，只要實現的某一個接口，那么就必須實現接口中所有的屬性和方法。

interface PersonInterface {
    name:string;
    say():void;
}
class Person implements PersonInterface{
    name:string = 'test';
    say():void{
        console.log(`我的名字叫:${this.name}`);
    }
}
let p = new Person();
p.say();

接口"繼承"類，只要一個接口繼承了某個類，那么就會繼承這個類中所有的屬性和方法，但是只會繼承屬性和方法的聲明，不會繼承屬性和方法實現；如果接口繼承的類中包含了protected的屬性和方法，那么就只有這個類的子類才能實現這個接口；

class Person {
    protected name:string = 'test'; // 
    // name:string = 'test';
    age:number = 34;
    protected say():void{
        console.log(`name = ${this.name}, age = ${this.age}`);
    }
}
// let p = new Person();
// p.say();
interface PersonInterface extends Person{
    gender:string;
}
// 接口繼承的類中包含了protected的屬性和方法, 那么就只有這個類的子類才能實現這個接口
class Student extends Person implements PersonInterface{ // 所以Person中有受保護方法和屬性，這里要extends Person
    gender:string = 'male';
    name:string = 'zs';
    age:number = 18;
    say():void{
        console.log(`name = ${this.name}, age = ${this.age}, gender = ${this.gender}`);
    }
}

類和泛型

// 泛型類
class Chache<T> {
    arr:T[] = [];
    add(value:T):T{
        this.arr.push(value);
        return value;
    }
    all():T[]{
        return this.arr;
    }
}
let chache = new Chache<number>();
chache.add(1);
chache.add(3);
console.log(chache.all()); // [1, 3]

接口合并現象

當我們定義了多個同名的接口時，多個接口的內容會自動合并。

interface TestInterface {
    name:string;
}
interface TestInterface {
    age:number;
}
class Person implements TestInterface{ // 接口合并，必須同時實現name,age
    age:number = 19;
    name:string = 'test';
}

---

自動類型推斷

不用明確告訴編譯器具體是什么類型，編譯器就知道是什么類型。

////////////////   根據初始化值自動推斷   ////////////////
// 如果是先定義在初始化, 那么是無法自動推斷的
let value;
value = 123;
value = false;
// 如果是定義的同時初始化, 那么TS就會自動進行類型推薦
let value = 123; // let value:number = 123;
value = 456;
value = false;  // 報錯

////////////////   根據上下文類型自動推斷   ////////////////
window.onmousedown = (event)=>{ // window.onmousedown = (event:MouseEvent)=>
    console.log(event.target);
}

---

類型兼容性

interface TestInterface {
    name:string;
    children:{
        age:number
    };
}

let p1 = {name:'zs', children:{age:18}};
let p2 = {name:'zs',children:{age:'abc'},gender: 'box'};
let t:TestInterface;
t = p1; // 會遞歸檢查
t = p2; // 可多不可少,兼容

---

函數兼容性

參數

////////////////   參數個數   ////////////////
let fn1 = (x:number, y:number)=>{};
let fn2 = (x:number)=>{};
fn1 = fn2;
fn2 = fn1; // 可少不可多

////////////////   參數類型，返回值類型   ////////////////
// 必須一模一樣

函數雙向協變

////////////////   函數雙向協變   ////////////////
// 參數的雙向協變
let fn1 = (x:(number | string)) =>{};
let fn2 = (x:number) =>{};
fn1 = fn2;
fn2 = fn1;
// 返回值雙向協變
let fn1 = (x:boolean):(number | string) => x ? 123 : 'abc';
let fn2 = (x:boolean):number => 456;
fn1 = fn2; // 可以將返回值是具體類型的賦值給聯合類型
fn2 = fn1; // 不能將返回值是聯合類型的賦值給具體類型

函數重載

function add(x:number, y:number):number;
function add(x:string, y:string):string;
function add(x, y) {
    return x + y;
}

function sub(x:number, y:number):number;
function sub(x, y) {
    return x - y;
}
// let fn = add;
// fn = sub; // 不能將重載少的賦值給重載多的

let fn = sub;
fn = add; // 可以將重載多的賦值給重載少

---

枚舉兼容性

數字枚舉與數值兼容，數字枚舉與數字枚舉不兼容，字符串枚舉與字符串不兼容

enum Gender{
    Male,
    Female
}
let value:Gender;
value = Gender.Male;
value = 1 // 數字枚舉與數值兼容

---

類兼容性

只比較實例成員，不比較類的構造函數和靜態成員。

class Person {
    public name:string;
    public age:number;
    // public static age:number; // 如果name改成靜態成員，下面 p = a不報錯
    constructor(name:string, age:number){}
}
class Animal {
    public name:string;
    constructor(name:string){}
}
let p: Person;
let a: Animal;
// p = a; // 報錯
a = p; // 可多不少

類的私有屬性和受保護屬性會響應兼容性。

class Person {
    protected name:string;
}
class Animal {
    protected name:string;
}
let p: Person;
let a: Animal;
// p = a; // 報錯
// a = p; // 報錯

---

泛型兼容性

泛型只影響使用的部分，不會影響聲明的部分。

interface TestInterface<T> {
    // age:T; // 不加這個下面 t1 t2賦值不報錯，加了就報錯。加了下面t1 t2聲明有具體的類型，賦值就報錯
}
let t1: TestInterface<number>; // age:number
let t2: TestInterface<string>; // age:string
t1 = t2;
t2 = t1;

---

交叉和聯合類型

交叉類型

格式：type1 & type2 & ... 交叉類型是將多個類型合并為一個類型

let mergeFn = <T, U>(arg1:T, arg2:U):(T & U)=>{ // (T & U) 表示T和U類型合并后的類型
    let res = {} as (T & U);
    res = Object.assign(arg1, arg2);
    return res;
};
let res = mergeFn({name:'test'}, {age:18}); 
console.log(res); // {name: 'test', age:18}

聯合類型

格式：type1 | type2 | ... 聯合類型是多個類型中的任意一個類型

let value: (string | number);
value = 'abc';
value = 123;

---

類型保護

對于聯合類型的變量，在使用時如何確切告訴編譯器它是哪一種類型，通過類型斷言或者類型保護。

let getRandomValue = ():(string | number)=>{
    let num = Math.random();
    return (num >= 0.5) ? 'abc' : 123.123;
}
let value = getRandomValue();
if((value as string).length){
    console.log((value as string).length);
}else{
    console.log((value as number).toFixed());
} 
// 優化： 定義了一個類型保護函數, 這個函數的'返回類型'是一個布爾類型
// 這個函數的返回值類型是: (傳入的參數 is 具體類型)
function isString(value:(string | number)): value is string {
    return typeof value === 'string'; // true,value is string 為true. false, value is string 為false
}
if(isString(value)){
    console.log(value.length);
}else{
    console.log(value.toFixed());
}

---

null和undefined

TypeScript具有兩種特殊的類型， null和 undefined，它們分別具有值null和undefined。默認情況下我們可以將 null和 undefined賦值給任意類型，默認情況下null和 undefined也可以相互賦值。

如果不想把 null和 undefined賦值給其它的類型，或者不想讓 null和 undefined相互賦值，那么可以修改tsconfig.json配置，開啟strictNullChecks。

如果我們開啟了strictNullChecks，還想把null和 undefined賦值給其它的類型，就必須在聲明的時候使用聯合類型。

let value:(number | null | undefined);

對于可選屬性和可選參數而言，如果開啟了strictNullChecks，那么默認情況下數據類型就是聯合類型。

class Person {
    name?:string
}
function say(age?:number) {}

null或 undefined檢測

!

function getLength(value:(string | null | undefined)) {
    value = 'abc';
    return ()=>{
        // return value.length; // 報錯
        // return (value || '').length; // 解決報錯的第一種方式
        // return (value as string).length; // 解決報錯的第二種方式
        // 我們可以使用!來去除null和undefined
        // !的含義就是這個變量一定不是null和undefined,一定有值的
        return value!.length;
    }
}
let fn = getLength('www');
let res = fn();
console.log(res);

---

類型別名

類型別名就是給一個類型起個新名字，但是它們都代表同一個類型。

// 給string類型起了一個別名叫做MyString, 那么將來無論是MyString還是string都表示string
type MyString = string;
////////////////  類型別名也可以使用泛型  ////////////////
// type MyType<T> = {x:T, y:T};
// let value:MyType<number>;
value = {x:123, y:456};
////////////////  接口和類型別名相互兼容  ////////////////
type MyType = {
    name:string
}
interface MyInterface {
    name:string
}
let value1:MyType = {name:'lnj'};
let value2:MyInterface = {name:'zs'};
value1 = value2;
value2 = value1;

---

類型別名和接口

相同點：

都可以描述屬性或方法
都允許拓展

不同點：

type 可以聲明基本類型別名，聯合類型，元組等類型, interface不能
type不會自動合并

---

字面量類型

字面量就是源代碼中一個固定的值
例如數值字面量: 1,2,3,...
例如字符串字面量: 'a','abc',...
////////////////  TS中我們可以把字面量作為具體的類型來使用  ////////////////
當使用字面量作為具體類型時, 該類型的取值就必須是該字面量的值
type MyNum = 1;
let value1:MyNum = 1;
let value2:MyNum = 2; // 報錯

---

可辨識聯合

可辨識聯合具有共同的可辨識特征。一個類型別名，包含了具有共同的可辨識特征的類型的聯合。可辨識聯合可以在編譯的時候推斷出當前類型。

interface Square {
    kind: "square"; // 共同的可辨識特征
    size: number;
}
interface Rectangle {
    kind: "rectangle"; // 共同的可辨識特征
     number;
    height: number;
}
interface Circle {
    kind: "circle"; // 共同的可辨識特征
    radius: number;
}
/*
Shape就是一個可辨識聯合
因為: 它的取值是一個聯合
因為: 這個聯合的每一個取值都有一個共同的可辨識特征
* */
type Shape = (Square | Rectangle | Circle); // 可辨識聯合可以在編譯的時候推斷出當前類型
function aera(s: Shape) { // 不需要做類型斷言
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.width * s.height;
        case "circle": return  Math.PI * s.radius ** 2; // **是ES7中推出的冪運算符
    }
}

可辨識聯合完整性檢查

方式一: 給函數添加返回值 并 開啟strictNullChecks(使用這個方式，上面的例子三種類型的case語句都需要有)

方式二: 添加default + never （不推薦）

function MyNever(x: never):never { // 類型為 never
    throw new Error('可辨識聯合處理不完整' + x);
}
function aera(s: Shape):number{
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.width * s.height;
        case "circle": return  Math.PI * s.radius ** 2; // **是ES7中推出的冪運算符
        default:return MyNever(s); // 處理的不完整這里會提示報錯
    }
}

---

索引類型

通過[]索引類型訪問操作符, 我們就能得到某個索引的類型。

class Person {
    name:string;
    age:number;
}
type MyType = Person['name']; // string 類型
// 索引訪問操作符注意點
// 不會返回null/undefined/never類型
interface TestInterface {
    a:string,
    b:number,
    c:boolean,
    d:symbol,
    e:null,
    f:undefined,
    g:never
}
type MyType = TestInterface[keyof TestInterface];

// 獲取指定對象, 部分屬性的值, 放到數組中返回
let obj = {
    name:'lnj',
    age:18,
    gender:true
}
function getValues<T, K extends keyof T>(obj:T, keys:K[]):T[K][] {
    let arr = [] as T[K][];
    /*
        Person['name'] === string
        Person['age'] === number
        (string | number)[]
    */
    keys.forEach(key=>{
        arr.push(obj[key]);
    })
    return arr;
}
let res = getValues(obj, ['name', 'age']);

---

映射類型

根據舊的類型創建出新的類型, 我們稱之為映射類型。

---

分布式條件類型

條件類型(三目運算)

判斷前面一個類型是否是后面一個類型或者繼承于后面一個類型；如果是就返回第一個結果, 如果不是就返回第二個結果。

語法: T extends U ? X : Y;

type MyType<T> = T extends string ? string : any;
type res = MyType<boolean> // res 就是 any類型

分布式條件類型Exclude

type MyType<T> = T extends any ? T : never;
type res = MyType<string | number | boolean>; // res 就是 (string | number | boolean)
// 應用：從T中剔除可以賦值給U的類型。 
type MyType<T, U> = T extends U ? never : T;
type res = MyType<string | number | boolean, number> // res = (string | boolean)

ts已經封裝好了Exclude，分布式條件類型

type res = Exclude<string | number | boolean, number>
///// 相反操作，提取可以賦值給U的。
type res = Extract<string | number | boolean, number | string> // 提取可以賦值給number和string的類型，聯合類型、一個類型都可以。
///// 從T中剔除null和undefined。 NonNullable。
type res = NonNullable<string | null | boolean | undefined>
///// 獲取函數返回值類型。 ReturnType
type res = ReturnType<(()=>number)> // number 類型
///// 獲取一個類的構造函數參數組成的元組類型。 ConstructorParameters
class Person {
    constructor(name:string, age:number){}
}
type res = ConstructorParameters<typeof Person>; // res = [string, number]
///// 獲得函數的參數類型組成的元組類型。 Parameters
function say(name:string, age:number, gender:boolean) {}
type res = Parameters<typeof say>; // res = [string, number, boolean]

---

infer關鍵字

條件類型提供了一個infer關鍵字, 可以讓我們在條件類型中定義新的類型。

// 需求: 定義一個類型, 如果傳入的是數組, 就返回數組的元素類型, 如果傳入的是普通類型, 則直接返回這個類型。
type MyType<T> = T extends any[] ? T[number] : T;
type res = MyType<string[]>; // string[]
type res = MyType<number>; // number

type MyType<T> = T extends Array<infer U> ? U : T;
type res = MyType<string[]>; // string[]
type res = MyType<number>; // number

---

unknown

unknown類型是TS3.0中新增的一個頂級類型，被稱作安全的any。

1.任何類型都可以賦值給unknown類型
let value:unknown;   value = 123;    value = "abc";    value = false;

2.如果沒有類型斷言或基于控制流的類型細化, 那么不能將unknown類型賦值給其它類型
let value1:unknown = 123;
let value2:number;
value2 = value1; // 報錯
value2 = value1 as number; // 不報錯
if(typeof value1 === 'number'){ // 類型細化
    value2 = value1;
}

3.如果沒有類型斷言或基于控制流的類型細化, 那么不能在unknown類型上進行任何操作
let value1:unknown = 123;
value1++; // 報錯
(value1 as number)++;

4.只能對unknown類型進行 相等或不等操作, 不能進行其它操作(因為其他操作沒有意義)
let value1:unknown = 123;
let value2:unknown = 123;
console.log(value1 === value2);
console.log(value1 !== value2);
console.log(value1 >= value2); // 雖然沒有報錯, 但是不推薦, 如果想報錯提示, 可以打開嚴格模式

5.unknown與其它任何類型組成的交叉類型最后都是其它類型
type MyType = number & unknown; // number
type MyType = unknown & string;

6.unknown除了與any以外, 與其它任何類型組成的聯合類型最后都是unknown類型
type MyType = unknown | any; // any
type MyType = unknown | number;
type MyType = unknown | string | boolean;

7.never類型是unknown類型的子類型
type MyType = never extends unknown ? true : false; // true

8.keyof unknown等于never
type MyType = keyof unknown;

9.unknown類型的值不能訪問其屬性,方法,創建實例
class Person {
    name:string = 'lnj';
    say():void{
        console.log(`name = ${this.name}`);
    }
}
let p:unknown = new Person(); // 設置為unknown類型，下面的方法報錯
p.say();
console.log(p.name);

10.使用映射類型時, 如果遍歷的是unknown類型, 那么不會映射任何屬性
type MyType<T> = {
    [P in keyof T]:any
}
type res = MyType<unknown> // 空對象

---

Symbols

和ES6中的Symbol一樣。

---

迭代器和生成器

迭代器for...of Iterator接口

let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

生成器

當生成目標為ES5或ES3，迭代器只允許在Array類型上使用。在非數組值上使用 for..of語句會得到一個錯誤，就算這些非數組值已經實現了Symbol.iterator屬性。為了解決這個問題, 編譯器會生成一個簡單的for循環做為for..of循環

---

模塊系統

TS中的模塊幾乎和ES6和Node中的模塊一致

1.ES6模塊
1.1分開導入導出
export xxx;
import {xxx} from "path";

1.2一次性導入導出
export {xxx, yyy, zzz};
import {xxx, yyy, zzz} from "path";

1.3默認導入導出
export default xxx;
import xxx from "path";
//////////////////////////////////////////////////////// 
2.Node模塊
1.1通過exports.xxx = xxx導出
通過const xxx = require("path");導入
通過const {xx, xx} = require("path");導入

1.2通過module.exports.xxx = xxx導出
通過const xxx = require("path");導入
通過const {xx, xx} = require("path");導入

ES6的模塊和Node的模塊是不兼容的, 所以TS為了兼容兩者就推出了
export = xxx;
import xxx = require('path');

---

命名空間

命名空間可以看做是一個微型模塊，當我們先把相關的業務代碼寫在一起，又不想污染全局空間的時候，我們就可以使用命名空間，本質就是定義一個大對象，把變量/方法/類/接口...的都放里面。

命名空間和模塊區別：

在程序內部使用的代碼，可以使用命名空間封裝和防止全局污染；在程序內部外部使用的代碼，可以使用模塊封裝和防止全局污染；

**總結: **由于模塊也能實現相同的功能，所以大部分情況下用模塊即可。

namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export const LettersValidator  = (value) =>{ // export 暴露給外界訪問
        return lettersRegexp.test(value);
    }
}
const lettersRegexp = /^[A-Za-z]+$/; // 再定義一個相同的，不會報錯
console.log(Validation.LettersValidator('abc'));
  
可以將命名空間放到單獨的ts, 用下面的方式引入，引入前需要對這個ts打包：tsc --outFile ./tests.ts
/// <reference path="./test.ts" /> 
// 使用前需要打包，tsc --outFile ./tests.ts

---

聲明合并

接口：在ts當中接口和命名空間是可以重名的，ts會將多個同名的合并為一個；同名接口如果屬性名相同, 那么屬性類型必須一致；同名接口如果出現同名函數, 那么就會成為一個函數的重載；

命名空間：同名的命名空間中不能出現同名的變量、方法等；同名的命名空間中其它命名空間沒有通過export導出的內容是獲取不到的；

命名空間和同名的類合并： 命名空間和類合并前提，類必須定義在命名空間的前面；會將命名空間中導出的方法作為一個靜態方法合并到類中；

class Person {
    say():void{
        console.log('hello world');
    }
}
namespace Person{
    export const hi = ():void=>{
        console.log('hi');
    }
}

命名空間和函數合并：函數必須定義在命名空間的前面；

function getCounter() {
    getCounter.count++;
    console.log(getCounter.count);
}
namespace getCounter{
    export let count:number = 0;
}

命名空間和枚舉合并：沒有先后順序的要求；

enum Gender {
    Male,
    Female
}
namespace Gender{
    export const Yao:number = 666;
}

---

裝飾器

Decorator 是 ES7 的一個新語法，目前仍處于提案中。裝飾器是一種特殊類型的聲明，它能夠被附加到類，方法， 訪問器，屬性或參數上；添加到不同地方的裝飾器有不同的名稱和特點。

+ 附加到類上, 類裝飾器
+ 附加到方法上,方法裝飾器
+ 附加到訪問器上,訪問器裝飾器
+ 附加到屬性上,屬性裝飾器
+ 附加到參數上,參數裝飾器

在TS中裝飾器也是一項實驗性的特性，所以要使用裝飾器需要手動打開相關配置修改配置文件experimentalDecorator

裝飾器基本格式：

普通裝飾器

// 給Person這個類綁定了一個普通的裝飾器,裝飾器的代碼會在定義類之前執行, 并且在執行的時候會把這個類傳遞給裝飾器
function test(target) {
    console.log('test');
}
@test
class Person {} // test

裝飾器工廠

// 如果一個函數返回一個回調函數, 如果這個函數作為裝飾器來使用, 那么這個函數就是裝飾器工廠
function test(target) {
    console.log('test');
}
function demo() {
    console.log('demo out');
    return (target)=>{
        console.log('demo in');
    }
}
@test()  // 給Person這個類綁定了一個裝飾器工廠,在綁定的時候由于在函數后面寫上了(),所以會先執行裝飾器工廠拿到真正的裝飾器,真正的裝飾器會在定義類之前執行, 所以緊接著又執行了里面
class Person {} // demo out   demo in

裝飾器組合

普通的裝飾器可以和裝飾器工廠結合起來一起使用，結合起來一起使用的時候, 會先從上至下的執行所有的裝飾器工廠, 拿到所有真正的裝飾器，然后再從下至上的執行所有的裝飾器。

@test
@demo()
class Person {} // demo out   demo in   test

---

類裝飾器

類裝飾器在類聲明之前綁定（緊靠著類聲明）
類裝飾器可以用來監視，修改或替換類定義
在執行類裝飾器函數的時候, 會把綁定的類作為其唯一的參數傳遞給裝飾器
如果類裝飾器返回一個新的類，它會新的類來替換原有類的定義

function test(target:any) {
    target.prototype.personName = 'hello';
    target.prototype.say = ():void=>{ // say方法實現
        console.log(`my name is ${target.prototype.personName}`);
    }
}
@test
class Person {}
interface Person{ // 和Person類合并，有了say方法的聲明，下面p.say()就不會合并，
    say():void;
}
let p = new Person();
p.say(); // 報錯, my name is hello

// test接收的參數{ {構造函數} }
function test<T extends {new (...args:any[]):{}}>(target:T) {
    return class extends target { // 返回一個類
        name:string = 'lnj';
        age:number = 18;
    }
}
@test  // 返回的類會替換person
class Person {}
let p = new Person();
console.log(p); // {name: 'hello', age: 18}

---

defineProperty

可以直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回此對象。

// 定義一個新的屬性
let obj = {age:18};
Object.defineProperty(obj, 'name', {
    value:'lnj'
});
// 修改原有屬性
let obj = {age:18};
Object.defineProperty(obj, 'age', {
    value:34
});
// 修改屬性配置-讀寫
let obj = {age:18};
Object.defineProperty(obj, 'age', {
    writable:false
})
obj.age = 34; // 報錯
// 修改屬性配置-迭代
let obj = {age:18, name:'lnj'};
Object.defineProperty(obj, 'name', {
    enumerable: false
})
for(let key in obj){
    console.log(key);
}
// // 修改屬性配置-配置
let obj = {age:18, name:'lnj'};
Object.defineProperty(obj, 'name', {
    enumerable:false,
    configurable: false // 一經配置，后面再修改都會報錯
});
Object.defineProperty(obj, 'name', {
    enumerable:true,
    configurable: false // 報錯
});
for(let key in obj){
    console.log(key);
}

---

方法裝飾器

方法裝飾器寫在一個方法的聲明之前（緊靠著方法聲明），法裝飾器可以用來監視，修改或者替換方法定義。方法裝飾器表達式會在運行時當作函數被調用。

傳入下列3個參數：

對于靜態方法而言就是當前的類, 對于實例方法而言就是當前的實例
被綁定方法的名字
被綁定方法的屬性描述符

function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    // console.log(target);
    // console.log(propertyKey);
    // console.log(descriptor);
}
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.value = ():void=>{ // 通過獲取方法屬性，來替換值，也就是替換方法
        console.log('my name is ls');
    };
}
class Person {
    @test
    sayName():void{
        console.log('my name is zs');
    }
}
let p = new Person();
p.sayName(); // my name is ls

---

訪問器裝飾器

訪問器裝飾器聲明在一個訪問器的聲明之前（緊靠著訪問器聲明）。訪問器裝飾器應用于訪問器的屬性描述符并且可以用來監視，修改或替換一個訪問器的定義。

// TypeScript不允許同時裝飾一個成員的get和set訪問器
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.set = (value:string)=>{
        target.myName = value; // target為類的原型對象
    }
    descriptor.get = ():string=>{
        return target.myName;
    }
}
class Person {
    private _name:string;	
    constructor(name:string){
        this._name = name;
    }
    @test
    get name():string{
        return this._name;
    }
    set name(value:string){
        this._name = value;
    }
}
let p = new Person('ls');
p.name = 'zs';
console.log(p.name); // ls
console.log(p.__proto__.myName); // zs

---

屬性裝飾器

屬性裝飾器寫在一個屬性聲明之前（緊靠著屬性聲明）, 屬性裝飾器表達式會在運行時當作函數被調用，傳入下列2個參數：

對于靜態屬性來說就是當前的類, 對于實例屬性來說就是當前實例
成員的名字

function test(target:any, proptyName:string) {
    target[proptyName] = 'test';
}
class Person {
    // @test
    static age:number; // 也可以被裝飾修改
    @test
    name?:string;
}
let p = new Person();
console.log(p.name); // test

---

參數裝飾器

參數裝飾器寫在一個參數聲明之前（緊靠著參數聲明）。數裝飾器表達式會在運行時當作函數被調用。

傳入下列3個參數：

對于靜態方法而言就是當前的類, 對于實例方法而言就是當前的實例
被綁定方法的名字
被綁定方法的屬性描述符

function test(target:any, proptyName:string, index:number) {
    console.log(target);
    console.log(proptyName);
    console.log(index);
}
class Person {
    say(age:number,@test name:string):void{}
}

---

混入

對象混入

let obj1 = {name:'lnj'};
let obj2 = {age:34};
Object.assign(obj1, obj2);
console.log(obj1);
console.log(obj2); // 無變化

類混入

// 定義兩個類, 將兩個類的內容混入到一個新的類中
class Dog {
    name:string = 'wc';
    say():void{
        console.log('wang wang');
    }
}
class Cat {
    age:number = 3;
    run():void{
        console.log('run run');
    }
}
// 一次只能繼承一個類
// class Animal extends Dog, Cat{}
class Animal implements Dog, Cat{
    name:string;
    age:number;
    say:()=>void;
    run:()=>void;
}
function myMixin(target:any, from:any[]) {
    from.forEach((fromItem)=>{ // 類方法混入target
        Object.getOwnPropertyNames(fromItem.prototype).forEach((name)=>{
            target.prototype[name] = fromItem.prototype[name];
        })
    })
}
myMixin(Animal, [Dog, Cat]);
let a = new Animal();
console.log(a);
a.say();
a.run();
// console.log(a.name); // 方法可以混入，屬性不可以
// console.log(a.age);

---

聲明

在開發中我們不可避免的需要引用第三方的 JS 的庫，但是默認情況下TS是不認識我們引入的這些JS庫的，所以在使用這些JS庫的時候，我們就要通過聲明來告訴告TS它是什么，它怎么用。

declare const $:(selector:string)=>{}; // 告訴ts $符號是個類型函數，接收一個string參數。$是導入的jquery
console.log($); // 有了declare，ts文件中這里就不會報錯

---

聲明文件

默認情況下ts會首先去查找項目中所有js文件和ts文件。也可以去修改ts.config.josn，最后加上include配置，告訴ts去查找哪些文件。

  "include": [
    "./src/**/*.ts",
    "./src/**/*.d.ts",
  ],

// declare.d.ts 文件中寫聲明文件
declare let myName:string;
declare function say(name:string, age:number):void;
// 注意點: 聲明中不能出現實現
declare class Person {
    name:string;
    age:number;
    constructor(name:string, age:number);
    say():void;
}
// test.ts
console.log(myName);
say('lnj', 18);
let p = new Person('zs', 666);
p.say();

對于常用的第三方庫，其實已經幫我們編寫好了對應的聲明文件。所以在開發中，如果我們需要使用一些第三方JS庫的時候我們只需要安裝別人寫好的聲明文件即可。

TS聲明文件的規范 @types/xxx 例如: 想要安裝jQuery的聲明文件，那么只需要npm install @types/jquery 即可。

總結

以上是生活随笔為你收集整理的TypeScript基本概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。