Question

TypeScript 的核心原则之一是对值所具有的结构进行类型检查，它有时被称做“鸭式辨型法”或“结构性子类型化”。

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

接口的使用

比如我们有一个函数，这个函数接受一个 User 对象，然后返回这个 User 对象的 name 属性:

const getUserName = (user) => user.name  // 报错 ，参数 "user" 隐式具有 "any" 类型

我们必须用一种类型描述这个 user 参数，但是这个类型又不属于上一节介绍到的各种基本类型。

这个时候我们需要 interface 来描述这个类型:

interface User {
    name: string
    age: number
    isMale: boolean
}

const getUserName = (user: User) => user.name

这个接口 User 描述了参数 user 的结构，当然接口不会去检查属性的顺序，只要相应的属性存在并且类型兼容即可

可选属性

当我们定义某个 interface 时，其中的属性有可能是可选的，那么我们应该如何用接口描述这种情况呢?

我们可以用可选属性描述这种情况，即在属性后面加上 ? 号

interface User {
    name: string
    age?: number
    isMale: boolean
}

当我们看到代码提示的时候，这个属性既可能是后面定义的类型也可能是 undefined

只读属性

我们可以利用 readonly 把一个属性变成只读性质，此后我们就无法对他进行修改

interface User {
    name: string
    age?: number
    readonly isMale: boolean
}

一旦我们要修改只读属性，就会出现警告

函数类型

如果属性值是一个函数，该怎么描述呢?

一种是直接在 interface 内部描述函数:

interface User {
    name: string
    age?: number
    readonly isMale: boolean
    say: (words: string) => string
}

另一种方法，我们可以先用接口直接描述函数类型:

interface Say {
    (words: string) : string
}

然后再在其他类型描述中使用：

interface User {
    name: string
    age?: number
    readonly isMale: boolean
    say: Say
}

属性检查

对象字面量当被赋值给变量或作为参数传递的时候，会被特殊对待而且经过“额外属性检查”。 如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误

interface Config {
  width?: number;
}

function  CalculateAreas(config: Config): { area: number} {
  let square = 100;
  if (config.width) {
      square = config.width * config.width;
  }
  return {area: square};
}

let mySquare = CalculateAreas({ widdth: 5 });  // error: 'widdth' not expected in type 'Config'

目前，解决这类问题有三种方式：

• 使用类型断言：

  let mySquare = CalculateAreas({ widdth: 5 } as Config);

• 添加字符串索引签名：

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

• 将字面量赋值给另外一个变量：

  let options: any = { widdth: 5 };
  let mySquare = CalculateAreas(options);

可索引类型

当某个属性包含多个不确定类型值的时候，我们可以使用可索引类型表示，可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

interface Phone {
    [name: string]: string
}

interface User {
    name: string
    age?: number
    readonly isMale: boolean
    say: () => string
    phone: Phone
}

继承接口

interface 支持继承

interface VIPUser extends User {
    broadcast: () => void
}

你甚至可以继承多个接口:

interface VIPUser extends User, SupperUser {
    broadcast: () => void
}