TypeScript学习笔记-接口

接口

// 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

// 实例：
interface LabelledValue {  // 接口
    label: string;
}
function printLabel (labelledValue: LabelledValue): LabelledValue {  // 使用
    console.log(labelledValue.label);
    return labelledValue;
}
let myObj = {
    size: 10,
    label: 'Size 10 Object'
};
printLabel(myObj);

可选属性

// 在可选属性名字定义的后面加一个?符号
interface SquareConfig {
    color?: string;
    width?: number;
}

只读属性

// 在属性名前用 readonly来指定只读属性
interface Point {
    readonly x: number;
    readonly y: number;
}
// ReadonlyArray<T>: 把所有可变方法去掉了,确保数组不被修改
let arr: number[] = [1, 2, 3, 4];
let readOnlyArr: ReadonlyArray<number> = arr;
arr = readOnlyArr as number[];  // 通过断言获取

// readonly vs const
// 做为变量使用的话用 const，若做为属性则使用readonly。

额外的属性检查

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;  // 带有任意数量的其它属性
} 

函数类型

interface SearchFunInterFace {
    (source: string, subString: string): boolean;  // 调用签名,一个只有参数列表和返回值类型的函数定义
}
let searchFun: SearchFunInterFace = function (source, subString) {
    let result = source.search(subString);
    return result > -1;
}

可索引类型

interface ArrStrInterface {
    readonly [index: number]: string;  // 索引签名:描述对象索引的类型，相应的索引返回值类型。支持两种索引签名：字符串和数字 
}
let arrStr: ArrStrInterface = ['Bob', 'Bill'];
// ArrStrInterface[2] = 'Allice'; readonly, 防止给索引赋值，索引签名是只读的

类类型

// 实现接口
interface ClockInterfaceA {  // 接口描述了类的公共部分
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterfaceA {
    currentTime: Date;

    constructor(h: number, m: number) {}

    setTime(date: Date) {
	    this.currentTime = date;
    }
}

// 类静态部分与实例部分的区别
// 类具有两个类型：静态部分的类型和实例的类型
// 类实现了一个接口时，只对其实例部分进行类型检查, constructor存在于类的静态部分，所以不在检查的范围内。
interface ClockConstructorInterface {
    new (hour: number, minute: number): ClockInterfaceB;  // 构造函数接口
}

interface ClockInterfaceB {
    tick();
}

function createClock(ctor: ClockConstructorInterface, hour: number, minute: number): ClockInterfaceB {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterfaceB {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}

let digital = createClock(DigitalClock, 12, 17);
digital.tick();

继承接口

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}

混合类型

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

接口继承类

// 继承类的成员但不包括其实现。接口会继承到类的private和protected成员, 此时这个接口类型只能被这个类或其子类所实现。
class Control {
    private state: any;
}

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

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