TypeScript中的接口

介紹：

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。它有時被稱做“鴨式辨型法”或“結構性子類型化”。在TypeScript裏，接口的作用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

對象類型的接口：

通過關鍵字interface來定義接口

interface List{
    id:number,
    name:string
}
interface Result{
    data:List[]
}
function render(result:Result) {
    result.data.forEach(val=>{
        console.log(val.id,val.name);
    })
}
let result={
    data:[
        {id:1,name:'A',sex:'male'},  //只要接口中有必須的字段，即使出現了額外的字段也不會報錯
        {id:2,name:'B'}
    ]
}
render(result);

如果這裏我們直接使用字面量的方式，TS就會對額外的字段進行類型檢查。

render({
    data:[
        // {id:1,name:'A',sex:'male'},  //報錯
        {id:2,name:'B'}
    ]
})

那麼，我就不繞彎子了，繞過這種類型檢查的方式一共有三種：

1.把對象字面量賦值給一個變量，函數接收變量（就像我們最上面的做法）

2.類型斷言（類型斷言的含義是我們要告訴編譯器我們知道這個對象的類型就是xxx）

// 類型斷言也有兩種書寫方式

//1.通過as關鍵字
render({
    data:[
        {id:1,name:'A',sex:'male'}, 
        {id:2,name:'B'}
    ]
} as Result)

//2.通過<>號
render(<Result>{
    data:[
        {id:1,name:'A',sex:'male'}, 
        {id:2,name:'B'}
    ]
})

3.使用字符串索引簽名：

interface List{
    id:number,
    name:string,
    [x:string]:any  //用任意的字符串去索引List可以得到任意的結果
}

接口成員的屬性：

1.可選屬性：

interface List{
    id:number,
    name:string,
    age?:number  //表示這個屬性可以有也可以沒有
}

2.只讀屬性：

interface List{
    readonly id:number,  //不允許修改
    name:string,
    [x:string]:any
}

當我們不確定接口中屬性的個數時，就可以使用可索引類型的接口（可索引類型的接口可以用字符串去索引也可以用數字去索引）

interface StringArray{
    [index:number]:string  //用任意的數字去索引StringArray都會得到一個string，相當於聲明瞭一個字符串類型的數組
}
let chars:StringArray=['a','b'];

interface Name{
    [x:string]:string,
    [z:number]:string
}

函數類型的接口：

函數定義的三種方式：

// 1.用變量來定義函數類型
let adds : (x:number,y:number)=>number;
adds=(a,b)=>a+b;

// 2.用接口聲明函數
interface Add{
    (x:number,y:number):number
}
let add:Add=(a,b)=>a+b;

// 3.類型別名定義函數(爲我們的函數類型和起一個名字，函數名爲ps)
type ps=(x:number,y:number)=>number;
let as:ps=(a,b)=>a+b;

下面我們來看一下混合類型接口：

混合類型接口：

一個接口既可以定義一個函數，也可以像對象一樣擁有屬性和方法

// 定義一個混合類型的接口
interface Lib{
    ():void,
    version:string,
    dosomestring():void
}

//實現混合類型的接口
let lib:Lib=(()=>{}) as Lib;
lib.version='2.0';
lib.dosomestring=()=>{};