/ typescript

TS - 类型

类类型

与C#或Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

通过 implements 关键字,确定出类实例所拥有字段的类型。

同样的接口中也可以定义实例所拥有的方法,以及确定方法参数和返回值类型

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

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

类的静态部分和实例部分

  • 静态部分

类的实例化方法(constructor),以及类下带的方法

  • 实例部分

写在类里面的属性以及方法

所以说静态部分可以认为是类的属性,而 implements 关键字规定的是实例方法,所以当需要定义类的静态部分,需要单独写一个接口。

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

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

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

上诉代码,用 ClockConstructor 定义了类的静态方法,用 ClockInterface 定义了类的实例方法。通过 createClock 完整定义了整个类。

接口继承

和类一样,接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}
// 强转成 Square 对象
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

接口继承可以实现多继承,只需在 extends 后跟上多个 interface 用逗号分割即可。

混合类型

先前我们提过,接口能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点,有时你会希望一个对象可以同时具有上面提到的多种类型。

比如一个函数,是可以拥有属性的。

interface Counter {
    // 函数定义
    (start: number): string;
    // 函数属性定义
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    // 得先强转不然会报错
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;