typescript 中的 interface-原创手记-慕课网

有关接口概念之前的 javascript 新方向中我们提及到了 javascript 作为一门动态语言本身没有接口的概念。但是接口好处是不言而喻，javascript 要是想干大事就少不了接口。在 javascript 中接口是定义。
我们的第一个接口，函数 printLabel 接受参数，对参数有一定要求，也就是参数对象需要有 label 属性。当然传入的对象参数可以除了有 label 属性也可以有其他属性，但是必须至少有一个 label 属性。

第一个接口

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

我们定义 interface 接口 LabelledValue ，主要来定义一个数据结构，然后将参数类型定义为 LabelledValue ，这样就确保 printLabel 函数接受参数为一个至少具有 label 属性的对象。这样显式定义一个具有 label 的对象。

interface LabelledValue {    label: string;
}function printLabel(labelledObj: LabelledValue) {    console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

当然我们定义接口，有时候没有必要实现每一个属性，
这里定义的 SquareConfig 接口与之前定义接口区别不大，不过在属性名称后面多了 ? 来表示该属性为可选属性。

interface SquareConfig {
    color?: string;
    width?: number;
}function createSquare(config: SquareConfig): {color: string; area: number} {    let newSquare = {color: "white", area: 100};    if (config.color) {
        newSquare.color = config.color;
    }    if (config.width) {
        newSquare.area = config.width * config.width;
    }    return newSquare;
}let mySquare = createSquare({color: "black"});

这里我们看一看 createSquare 函数，接受一个 SquareConfig 接口的对象，这里 SquareConfig 定义数据结构，但是数据结构中每一个属性不是必须而是可选的，然后返回一个 {color: string; area: number} 数据结构。

只读属性

多数情况下，创建的实现某个接口的对象，是可以在创建后对对象属性进行修改的，这就是 mutable ,我们在现代编程需要，特别是函数式编程中需要 immutable ，我们可以在接口定义时在属性（字段）属性前面添加修饰 readonly

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

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!

附加属性检查

之前我们已经学习到了可选属性定义，我们定义 createSquare 参数类型为 SquareConfig，以及返回类型

interface SquareConfig {
    color?: string;
    width?: number;
}function createSquare(config: SquareConfig): { color: string; area: number } {    // ...}

let mySquare = createSquare({ colour: "red", width: 100 });

如果我们传入的参数属性名称可接口不一致，在编译时就会提示错误。获取我们传入一个 interface 中没有定义的类型同样会报编译错误。

// error: 'colour' not expected in type 'SquareConfig'let mySquare = createSquare({ colour: "red", width: 100 });

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

但是我们通过定义一个附加属性就可以轻松地解决这个问题 [propName: string]: any;

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

let squareOptions = { colour: "red", width: 100 };let mySquare = createSquare(squareOptions);

定义函数类型

之前我们学习的接口通常用于描述 javascript 对象的结构（shape），接口还可以描述一个函数。

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

这里我们定义接口 SearchFunc 用于描述一个函数，接受字符串类型 source 和字符串类型 subString 返回一个 boolean 类型

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {    let result = source.search(subString);    return result > -1;
}

好我们定义了变量接受一个函数作为值。为这个 SearchFunc 类型变量赋值函数也必须具有接口 SearchFunc 定义的结构。

接口的继承

有关接口的继承，在 typescript 接口是可以继承，所谓继承可能解释为扩展可能更好理解

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

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

接口的多继承

我们定义接口可以继承多个接口，这里 square 继承了 shape 和 Penstroke 两个接口，然后具有自己的属性。

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;

作者：zidea
链接：https://www.jianshu.com/p/acf8b0a6ab61