TypeScript笔记-接口TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型

系列文章

接口 interface

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface SquareConfig{
    color: string; // 必填字段
    width?: number; // 问好“?”代表可选属性
    readonly x: number; // readonly-只读属性，只能在对象刚刚创建的时候修改其值， 只读属性必须在声明时或构造函数里被初始化。
    [propName: string]: any; // 该对象可有任意数量的其他属性
}

1. 函数类型

说明函数的参数类型以及返回类型

interface SearchFunc {
    (source: string, subString: string): boolean
}
// 参数部分 (source: string, subString: string)
// 冒号“：”右侧部分为返回值，即，该函数返回值应为boolean类型

// 示例
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
    return result > -1;
}

2. 可索引的类型

可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

TypeScript支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray = ['bob', 'fred'];
let str: string = myArray[0];

3. 类类型

强制一个类去符合某种契约

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}
class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) {}
}

4. 继承接口

interface Shape {
    color: string;
}
interface PenStroke {
    width: number;
}

//  一个接口可以继承多个接口，创建出多个接口的合成接口
interface Square extends Shape, PenStroke {
    sideLength: number;
}
// 等同于
interface Square {
    color: string;
    width: number;
    sideLength: number;
}

implements 和 extends的区别

extends：一个接口对另一个接口的继承，同上“继承接口”示例
implements：一个类实现了某个或多个接口，同上“类类型”示例

// Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。
interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的private和protected成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}