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=()=>{};