TypeScript学习——接口

什么是接口

在面向对象语言中，接口是一个很重要的概念，他是对行为的抽象，而具体如何行动需要由类去实现。

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

interface Human{
  name: string;
  age: number;
  gender: string;
}
let zink: Human = {
  name: 'zink',
  age: 21,
  gender: 'man',
}

在这个例子中，我们定义了一个接口Human，接着定义了一个变量zink，它的类型是Human。这样，我们就约束了zink的形状必须和接口Human一致。
接口一般首字母大写。
定义的变量的属性不允许多于或少于接口。赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时候我们希望不要完全匹配一个形状，那么可以用可选属性：

interface Human{
  name: string;
  age?: number;  //用?表示此属性可选
}
let zink: Human = {
  name: 'zink',
}
let jack: Human = {
  name: 'jack',
  age: 18,
}

可选属性的含义是该属性可以不存在。
但此时依然不可以添加未定义的属性。

任意属性

按照以上的写法，在定义接口时难免有些死板，所以我们在某些场景下需要使用任意属性：

interface Human {
  name: string;
  age?: number;
  [propName: string]: any
}

let zink: Human = {
  name: 'zink',
  age: 21,
  gender: 'man',
  height: 174,
}

使用[propName: string]定义了任意属性的key取string类型的值。

注意点：一旦定义了任意属性，那么确定属性和可选属性必须是它的类型的子集

interface Human{
    name: string;
    age?: number;
    [propName: string]: string;
}

let zink: Human= {
    name: 'zink',
    age: 25,  //error
    gender: 'man'  
};

在这个例子中，任意属性的值是string，但是可选属性age的值却是number，number不是string的子属性，所以报错。所以，对于任意属性，我们最好定义为any

只读属性

顾名思义，只读属性的含义是变量只能在创建的时候被赋值，此后只允许读取，不允许修改。用readonly定义。

interface Human {
  readonly id: number;
  name: string;
  age: number;
  [propName: string]: any;
}

let zink: Human = {
  id: 1,
  name: 'zink',
  age: 21,
  gender: 'man'
}
zink.id = 2;  //error

上例中，我们用readonly定义了id，id在初始化赋值后又被赋值了，所以报错了。

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