TS的接口interface

接口 interface

1.基本概念

接口: 接口是TS设计出来用于定义对象类型的，可以对对象的形状进行描述。

定义interface一般首字母大写。

interface Person {
 ?  name: string
 ?  age: number
}
 
const p1: Person = {
 ?  name: 'lin',
 ?  age: 18
}

2.可选属性

跟函数的可选参数是类似的，在属性上加个 ?，这个属性就是可选的，比如下面的 age 属性

interface Person {
 ?  name: string
 ?  age?: number
}
 
const p1: Person = {
 ?  name: 'lin',
}

3.只读属性

如果希望某个属性不被改变，可以这么写：

interface Person {
 ? ?readonly id: number
 ? ?name: string
 ? ?age: number
}

改变这个只读属性时会报错。

4.interface 描述函数类型

interface ISum {
 ?  (x:number,y:number):number
}
 
const add:ISum = (num1, num2) => {
 ?  return num1 + num2
}

5.自定义属性（可索引的类型）

上文中，属性必须和类型定义的时候完全一致，如果一个对象上有多个不确定的属性，怎么办？

interface RandomKey {
 ?  [propName: string]: string
}
 
const obj: RandomKey = {
 ?  a: 'hello',
 ?  b: 'lin',
 ?  c: 'welcome',
}

如果把属性名定义为 number 类型，就是一个类数组了，看上去和数组一模一样。

interface LikeArray {
 ?  [propName: number]: string
}
 
const arr: LikeArray = ['hello', 'lin']
 
arr[0]  // 可以使用下标来访问值

6.duck typing(鸭子类型[6])

看到这里，你会发现，interface 的写法非常灵活，它不是教条主义。

用 interface 可以创造一系列自定义的类型。

事实上， interface 还有一个响亮的名称：duck typing(鸭子类型)。