TypeScript-接口

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

接口定义

TypeScript 的核心之一就是对数据所具有的结构进行类型检查，除了基本类型标注，针对对象类型的数据，除了这些方式之外，我们还可以通过： Interface （接口），来进行标注。

接口：对复杂的对象类型进行标注的一种方式，或者给其它代码定义一种契约（比如：类）

interface Point {    
    x: number;    
    y: number;
}

上面的代码定义了一个类型，该类型包含两个属性，一个 number 类型的 x 和一个 number 类型的 y，接口中多个属性之间可以使用 逗号 或者 分号 进行分隔

我们可以通过这个接口来给一个数据进行类型标注

let p1: Point = {    
    x: 100,    
    y: 100
};

注意：接口是一种 类型 ，不能作为 值 使用

interface Point {    
    x: number;    
    y: number;
}
let p1 = Point; //这样是错误

当然接口定义的规则远不止这些，

可选属性

接口也可以定义可选的属性，通过 ? 来进行标注

interface Point {
    x:number;
    y:number;
    color?: string;
}

其中color?表示这个属性是可选的

只读属性

我们还可以通过 readonly 来标注属性为只读

interface Point{
    readonly x: number;
    readonly y: number;
}

当我们标注了一个属性为只读的时候，那么该属性除了初始以外，是不能被再次赋值的

任意属性

有的时候，我们希望给一个接口添加任意属性，可以通过索引类型来实现

数字类型索引

interface Point {    
    x: number;    
    y: number;   
    [prop: number]: number;
}

字符串类型索引

interface Point {    
    x: number;    
    y: number;   
    [prop: string]: number;
}

数字索引是字符串索引的子类型

注意： 索引签名参数类型必须为 string 或 number 之一，但两者可同时出现

interface Point{
    [prop:string]: string;
    [prop1:number]: string;
}

注意：当同时存在数字类型索引和字符串类型索引的时候，数字类型的值类型必须是字符串类型的值类型或子类型

interface Point1 {   
    [prop1: string]: string;   
    [prop2: number]: number; // 错误

}

interface Point2 {   
    [prop1: string]: Object;   
    [prop2: number]: Date; // 正确
}

使用接口描述函数

我们还可以使用接口来描述一个函数

interface IFunc { 
    (a: string): string;
}

let fn: IFunc = function(a) {}

注意，如果使用接口来单独描述一个函数，是没 key 的

接口合并

多个同名的接口合并成一个接口

interface Box {    
    height: number;    
    width: number;
}

interface Box {    
    scale: number;
}

let box: Box = {
    height: 5, 
    width: 6, 
    scale: 10
}

• 如果合并的接口存在同名的非函数成员，则必须保证他们类型一致，否则编译报错
• 接口中的同名函数则是采用重载