04.Typescript 接口（Interface）

应用场景

上一章的基础数据类型能够保证变量类型的准确，但是遇到嵌套复杂的对象结构、类、函数，我们应该如何进行类型约束呢？

Typescript 通过 接口（Interface）来约束 对象、函数、类 这些结构复杂的类型。

当多人协作编程的时候，每个人的编程习惯不一致，而 Javascript 又具有随意性，接口（Interface）相当于在几位程序员之间定义了一套约束规则，大家都必须尽量遵守规则。如果有人破坏规则，Typescript 编译器将会编译失败，要求程序员纠正错误。这对多人开发来说，非常重要。

基础语法

新建index.ts文件，定义接口如下：

interface Animal {
    species: string;
    habitat: string;
    legs: number;
}

let cat: Animal = {
    species: '猫科',
    habitat: '陆地',
    legs: 4,
    color:'black', //多余属性，此处报错
};

在终端中输入编译指令 tsc index.ts，编译之后的代码如下：

var cat = {
    species: '猫科',
    habitat: '陆地',
    legs: 4
};

通过编译，你会发现，编译器依赖于 Interface 进行类型检查，编译成功之后，Interface 将会被移除。

注意：

1. 接口名称要首字母大写，接口内部的属性以分号 ; 分割。
2. 如果没有特殊声明，定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致。

接口属性

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在的。此时，我们使用可选属性。

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

interface Animal {
    species: string;
    habitat: string;
    legs?: number;
}
//legs为可选属性
let cat: Animal = {
    species: '猫科',
    habitat: '陆地',
};

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Car {
    readonly id: number;
    name: string;
}

let benz: Car = {
    id: 89757,
    name: 'S560',
};

benz.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

任意属性

某些场景下，我们希望接口拥有n个任意属性，语法是用 [] 将属性包裹起来：

interface Clothes {
    color: string;
    size: string;
    price: number;
    [propName: string]: any;
}

let coat: Clothes = {
    color: '黄色',
    size: 'M',
    price: 149,
    type: '春秋款',
    inventory: 5000,
}

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

interface Clothes {
    color: string;
    size: string;
    price: number;
    [propName: string]: string | number;
}

let coat: Clothes = {
    color: '黄色',
    size: 'M',
    price: 149,
    type: '春秋款',
    inventory: 5000,
}

接口本质

接口 Interface 本质上是一种约束契约。无论现在编写这段代码的程序员，还是将来某一刻试图修改代码的程序员，都要尽量遵守这一契约。当然，如果理由充分，你也可以修改接口，扩展它的契约规则。