TypeScript - 接口

前言

本文主要记录下 TypeScript 中的接口（interface），日常学习总结篇。 

一、接口是什么

TypeScript 中文文档解释如下：

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做 “鸭式辨型法” 或 “结构性子类型化”。在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对对象的形状（Shape）进行描述。

二、接口初探

在 TypeScript 中，使用接口来定义对象的类型，在声明一个对象、函数或者类时，先定义接口，确保其数据结构的一致性。TypeScript 编译器依赖接口用于类型检查。示例如下：

// 定义人的接口
interface IPerson {
  id: number
  name: string
  age: number
  sex: string
}

const user: IPerson = {
  id: 1,
  name: 'Jenny',
  age: 18,
  sex: '女'
}

类型检查器会查看对象内部的属性是否与 IPerson 接口描述一致，如果不一致就会提示类型错误。

三、可选属性

通过 interface 定义的接口，如果没有特殊声明，定义的变量属性个数不可多也不可少。当接口的属性不全是必需时，有些是只在某些条件下存在，或者根本不存在，可通过  属性名?: 类型  将属性定义为可选属性。示例如下：

interface IPerson {
  id: number
  name: string
  age?: number  // 可选属性
  sex?: string  // 可选属性
}

const user: IPerson = {
  id: 1,
  name: 'Jenny',
  // age: 18, // 可有可无
  // sex: '女' // 可有可无
}

可选属性的好处：

可以对可能存在的属性进行预定义；可以捕获引用了不存在的属性时的错误。  四、只读属性

一些对象属性只能在对象刚刚创建的时候修改其值，可以在属性名前用  readonly  来指定为只读属性。示例如下：

interface IPerson {
  readonly id: number
  name: string
}

const user: IPerson = {
  id: 1,
  name: 'Jenny'
}

user.name = 'abc' // OK
user.id = 2 // 报错：无法分配到 “id”，因为它是只读属性。

注意：只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。 

五、任意属性

有时需要定义一个接口允许有任意的属性。可以使用  [propname: string]: any  来定义一个宽泛的属性。示例如下：

interface IPerson {
  id: number
  name: string
  [propname: string]: any
}

const user: IPerson = {
  id: 1,
  name: 'Jenny',
  status: 'work'
}

任意属性共支持两种索引签名，字符串和数字：

索引签名是 string 字符串类型， [propName: string]: any 索引签名是 number 数值类型， [propIndex: number]: any 

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集。 示例如下：

interface IPerson {
  id: number  // 报错：类型“number”的属性“id”不能赋给“string”索引类型“string”。
  name?: string
  [propname: string]: string
}

// 报错：不能将类型“{ id: number; name: string; status: string; }”分配给类型“IPerson”。
// 属性“id”与索引签名不兼容。
// 不能将类型“number”分配给类型“string”。
const user: IPerson = {
  id: 1,
  name: 'Jenny',
  status: 'work'
}

如果同时使用两种类型的索引，数字索引的返回值必须是字符串索引返回值类型的子类型。示例如下：

interface IPerson {
  [propname: string]: boolean
  [propname: number]: false // 必须是boolean的子集
  // [propname: number]: number // 报错：“number”索引类型“number”不能分配给“string”索引类型“boolean”。
}

const user: IPerson = {
  id: true,
  1: false,
  // 2: true // 报错：不能将类型“true”分配给类型“false”。
}

六、函数类型

除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。示例如下：

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

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

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。你可以改变函数的参数名，只要保证函数参数的位置不变。函数的参数会被逐个进行检查。上例可重写如下：

// source => src, subString => sub
const mySearch: SearchFunc = (src: string, sub: string): boolean => {
  return src.search(sub) > -1;
}

如果你不想指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量。示例如下：

const mySearch: SearchFunc = (src, sub) => {
  return src.search(sub) > -1;
}

七、类类型

我们希望类的实现必须遵循接口定义，那么可以使用 implements 关键字来确保兼容性。

这种类型的接口在传统面向对象语言中最为常见，比如 java 中接口就是这种类类型的接口。这种接口与抽象类比较相似，但是接口只能含有抽象方法和成员属性，实现类中必须实现接口中所有的抽象方法和成员属性。示例如下：

interface Animate {
  name: string,
  run(time: number): string
}

class Dog implements Animate{
  name: string
  constructor(name: string) {
    this.name = name
  }
  run(time: number) {
    return `${this.name}可以跑${time}分钟`
  }
}

接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

一个类可以实现多个接口，示例如下：

interface Animate {
  name: string,
  run(time: number): string
}

interface Food {
  eat(type: string): string
}
class Dog implements Animate, Food{
  name: string
  constructor(name: string) {
    this.name = name
  }
  run(time: number) {
    return `${this.name}可以跑${time}分钟`
  }
  eat(type: string) {
    return `${this.name}吃${type}`
  }
}

八、继承接口

和类一样，接口也可以通过关键字 extends 相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。示例如下：

interface IPerson {
  name: string
}

interface Teacher extends IPerson {
  suject: string
}

const user = {} // 注意这里的写法，创建一个对象并指定泛型
// user 拥有 name 和 suject 两个属性
user.name = 'Jenny'
user.suject = 'TypeScript'

一个接口可以继承多个接口，创建出多个接口的合成接口。示例如下：

interface Graphics {
  color: string
}

interface Square {
  width: number
}

interface Circle extends Graphics, Square {
  point: number[]
}

const round = {}
round.color = 'purple'
round.width = 1007
round.point = [13, 14]

九、混合类型

接口可以描述函数、对象的方法或者对象的属性。有时希望一个对象同时具有上面提到的多种类型，比如一个对象可以当做函数使用，同时又具有属性和方法。示例如下：

interface Counter {
  (start: number): string
  interval: number
  reset(): void
}

// getCounter() 函数，返回值是 Counter 类型
function getCounter(): Counter {
  let counter = function (start: number) {} as Counter // 此处通过类型断言，将函数对象转换为 Counter 类型，转换后的对象不但实现了函数接口的描述，使之成为一个函数，还具有 interval 属性和 reset() 方法
  counter.interval = 1000
  counter.reset = function () {}
  return counter
}

const c = getCounter()
c(10)
c.reset()
c.interval = 200