Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)

一、简介

interface(接口)是对象的模板，可以看作是一种类型约定，中文译为“接口”。使用了某个模板的对象，就拥有了指定的类型结构。

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

// 实现该接口很简单，只要指定它作为对象的类型即可。
const p:Person = {
  firstName: 'John',
  lastName: 'Smith',
  age: 25
};

  1.方括号运算符可以取出 interface 某个属性的类型

interface Foo {
  a: string;
}

type A = Foo['a']; // string

2.interface 可以表示对象的各种语法，它的成员有5种形式

• 对象属性

interface Point {
  x: number;
  y: number;
}
// x和y都是对象的属性，分别使用冒号指定每个属性的类型。

注意：

1.属性之间使用分号或逗号分隔，最后一个属性结尾的分号或逗号可以省略

2.如果属性是可选的，就在属性名后面加一个问号"?"

3.如果属性名是只读的，就在属性名前面加上 readonly修饰符且用空格隔开

.interface A {
    readonly a: string;
}

• 对象的属性索引

1.属性索引共有string、number和symbol三种类型，一个接口中，最多只能定义一个字符串索引

2.对象的属性索引

interface A {
    [prop: string] : number
}

// [prop: string]就是属性的字符串索引，表示属性名只要是字符串，都符合类型要求

3.一个接口中，最多只能定义一个字符串索引。字符串索引会约束该类型中所有名字为字符串的属性。

// 属性索引指定所有名称为字符串的属性，它们的属性值必须是数值（number）。属性a的值为布尔值
interface MyObj {
  [prop: string]: number;

  a: boolean;      // 编译错误
}

4.属性的数值索引，其实是指定数组的类型。

// [prop: number]表示属性名的类型是数值，所以可以用数组对变量obj赋值。
interface A {
  [prop: number]: string;
}

const obj:A = ['a', 'b', 'c'];

注意：

1.一个接口中最多只能定义一个数值索引。数值索引会约束所有名称为数值的属性。 

2.如果一个 interface 同时定义了字符串索引和数值索引，那么数值索引必须服从于字符串索引。因为在 JavaScript 中，数值属性名最终是自动转换成字符串属性名

// 数值索引的属性值类型与字符串索引不一致，就会报错。数值索引必须兼容字符串索引的类型声明
interface A {
  [prop: string]: number;
  [prop: number]: string; // 报错
}

interface B {
  [prop: string]: number;
  [prop: number]: number; // 正确
}

• 对象的方法

// 第一种
interface A {
    f(