TypeScript接口

1. 概念预览

typescript类型核心原则之一就是对值所具有的结构进行类型检查. 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约.

2. 代码展示

• 基本示例

interface labelleValue {
    label: string;
}

function printLabel(labelleObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10,label: "Size 10 Object"};

printLabel(myObj);

• option bags模式

当接口里的属性全都是必须的时候,可以使用option bags模式

interface SquareConfig {
    // option bags 模式
    color?: string;
    width?: number;
}

• 只读属性

如果一个对象的属性被指定为readonly那么这个属性不能被重新赋值 readonly和const两个关键字的区别:readonly作用于属性,const作用于变量

interface Point {
    // 只读属性
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

• ReadonlyArray

typescript具有ReadonlyArray<T>属性,它与Array<T>相似,只是把所有可变方法去掉了,因此可以确保数组创建后不能被修改

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

• 额外属性检查

当我们使用对象字面量的时候,会触发额外属性检查,如果字面量不符合额外类型检查的预期,则会报错! 解决方式:使用类型断言,将其整体断言成接口类型

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}
let mySquare = createSquare({ colour: "red", width: 100 });
// 错误
// error: 'colour' not expected in type 'SquareConfig'
let mySquare = createSquare({ colour: "red", width: 100 });
// 解决方式1
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
// 解决方式2
interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

• 函数类型的接口

interface SearchFunc {
  (source: string, subString: string): boolean;
}

// 基本应用
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
// 形参名称不必与接口中的名称相同
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}
// 不指定参数类型也可以自动推断出
let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}

• 索引签名

TypeScript可索引的类型具有一个索引签名: 仅支持number和string

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

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

// 两个不同类型的x属性:这样用是推荐的
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
}
// 结合只读关键字防止给索引赋值产生错误
interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

• 类类型

interface ClockInterface {
    currentTime: Date;
}

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

// 描述一个类内部的方法
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属于类的静态部分

// 定义类的静态接口
interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
// 定义类的实例接口
interface ClockInterface {
    tick();
}
// 函数传入一个构造函数(静态),...args:返回实例
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);

• 继承接口

实现接口的灵活复用 一个接口可以继承多个接口,构成合成接口

interface Shape {
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
// 合成接口
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

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

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

• 混合类型

如果你希望一个对象同时拥有以上提到的多种类型

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;

• 接口继承类

接口继承类的原理:其实是继承类的成员,成员的一些private和protected特性,但是不包括其实现 这意味着它只能被这个类或者其子类所实现

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}
// 被子类实现,不报错
class Button extends Control implements SelectableControl {
    select() { }
}
// 类继承类
class TextBox extends Control {
    select() { }
}

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}

class Location {

}