接口（interface）

TypeScript 不仅能帮助前端改变思维方式，还能强化面向接口编程的思维和能力，而这正是得益于 Interface 接口类型。

接口类型

使用接口定义变量和函数参数的类型

interface PersonInfo {
  name: string;
  age: number;
}

// 定义对象的类型
let zhangsan: PersonInfo = {
  name: "张三",
  age: 20,
};

// 定义数组的类型
interface ArrayNumber {
  // [下标类型]:值类型
  // k 可以是任意变量名 , 含义代表索引的意思
  [k: number]: number;
}

let arr1: ArrayNumber = [1, 2, 3];

// 定义函数的类型
interface PersonFn {
  // (所有的参数及类型):函数返回值的类型
  (p: PersonInfo): void;
}

let Person1: PersonFn = (obj: PersonInfo): void => {
  console.log(obj.name, obj.age);
};

注意：

1. 很少使用接口类型来定义函数的类型，更多使用内联类型或类型别名配合箭头函数语法来定义函数类型；

继承

多个不同接口之间是可以实现继承的，但是如果继承的接口PersonInfo和被继承的接口NameInfo有相同的属性，并且类型不兼容，那么就会报错。

interface NameInfo {
  name: string;
}

interface AgeInfo {
  age: number;
}

interface PersonInfo extends NameInfo, AgeInfo {
  height: number;
}

let zs: PersonInfo = {
  name: "张三",
  age: 20,
  height: 177,
};

多个不同的接口可以实现继承，组合成一个新的接口，那么如果出现多个相同名字的接口会怎么样？

多个相同接口

多个相同名字的接口，会进行合并，得到一个新的接口；这个接口的特性一般用在扩展第三方库的接口类型。

interface PersonInfo {
    name: string,
    age: number
}

interface PersonInfo {
    name: string,
    height: number
}

let zs: PersonInfo = {
  name: "张三",
  age: 20,
  height: 177,
};

缺省和只读特性

interface PersonInfo {
  name?: string; // 缺省
  readonly height: number; // 只读
}