TS中的接口

写在之前

或许当我们只需要定义一个对象或类的时候，使用接口对它们进行约束是显得麻烦的，但是当我们需要定义具有同样结构的多个对象或类的时候，接口就体现出它的作用了。

接口有什么作用，什么时候应该使用接口

定义

我们可以先看看接口的定义，接口是对某些数据或方法的约束规则。

其他面向对象编程语言中的接口

接下来我们可以先了解一下其他面向对象的语言，如C++中，接口的作用，在C++中，接口用于规定子类implements接口之后，必须实现接口中规定的变量和方法（相当于是对子类结构的约束）。

C++中将接口也看成是一个类，class B : A，表示B派生自A，A是接口。

C++中会将接口定义为虚函数。

如果需要提供一个getArea接口，那么需要在Shape类中将这个方法定义为虚函数，当class Rectangle派生自接口Shape，那么Rectangle类必须实现getArea这个方法。

TS中的接口

TypeScript中的接口是一个很灵活的概念，它相当于扩展了类似C++的面向对象编程语言中接口的行为。

TS中的接口允许对类的结构进行约束。（类似于C++中规定了类中必须有哪些变量和方法）。

TS中的接口也允许对对象（引用类型）的结构进行约束。（规定了对象中必须包含哪些属性）。

什么时候使用接口

当我们需要对引用类型的结构进行约束的时候可以使用接口。

当我们要声明多个类，我们可以首先定义一个接口用来规定这些类必须具有哪些变量、方法。
使用接口对引用类型进行约束
约束对象
一个简单的例子
interface Person{
  name: string;
  age: number;
}
const person1: Person = {
  name: 'aaa',
  age: 1,
}
接口一般首字母大写。我们首先定义了一个接口Person，然后定义了一个对象perosn1，并规定它的类型是Person，这样person1中就必须包含name属性和age属性了（必须不多也不少）。
如果对象中比接口少了一些属性
const person1: Person{
  name: 'aaa',
}
  // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.
我们可以看到当对象person1的类型是Person时，如果person1中没有包含Person中有的age属性，那么会出现报错。
如果对象中比接口多了一些属性
const person1: Person{
  name: 'aaa',
  age: 1,
  gender: 'male',   
}
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.
我们可以看到，当多出了Person接口中没有的属性的时候也会出现报错。
如果对象中的属性的类型和接口中的不一致
const person1: Person{
  name: 123,
  age: 1
}
//报错
当person1对象中的属性name的类型和Person接口中定义的不一致的时候，也会报错。
可选的属性
interface Person{
  name: string;
  age?: number;
}
const person1: Person{
  name: 'aaa',
}
使用？我们可以定义可选属性，如上面的例子中，age就是一个可选属性，表示以Person接口为类型约束的对象可以包含age属性，也可以不包含age属性。
任意属性
interface Person{
  name: string;
  age?: number;
  [key: string]: any;
}
const person1: Person = {
  name: 'aaa',
  gender: 'male',
}
上面的例子中，接口Person通过[key: string]表示key是string类型的，:any表示值可以是任何类型的。
任意属性的常见错误
interface Person{
  name: string;
  age?: number;
  [key: string]: string;
}
const person1: Person = {
  name: 'aaa',
  gender: 'male',
}
// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.
报错的原因是[key: string]: string同样会对上面的其他属性，如age?: number进行检查，很显然，age?: number不满足[key: string]: string的要求。
只读属性
interface Person{
  readonly id: number;
  name: string;
  age?: number;
  [key: string]: any;
}
const person1: Person = {
  id: 89742435,
  name: 'aaa',
  gender: 'male',
}
person1.id = 111;
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
我们可以使用readonly关键字声明某一个属性是只读的。这样以Person接口为类型约束的对象不能在初始化后修改id这个属性。
使用接口约束函数
一个简单的例子
interface encrypt{
  (key: string,val: string): string;
}
var md5: encrypt = function(key: string,val: string): string{
  ...
  return 'aaa';
}

WIP:TS基础——接口(interface)

TS中的接口