接口类型

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

接口用来自定义类型

定义对象的类型

/*
	interface obj {
		属性名:属性值的类型;
	}
*/

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

// 定义对象的类型
let obj: ObjItf = {
  name: "张三",
  age: 20,
};
console.log(obj);	// { name: '张三', age: 20 }

注意：

1. 分隔符 ;

2. 接口内的属性必须都得有

定义数组的类型

/*
	interface arr{
		[索引:索引类型]:值类型;
	}
*/

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

let arr: ArrItf = [1, 2, 3];
console.log(arr);	// [ 1, 2, 3 ]

let arrs:any = [1,"2"]
console.log(arrs);	// [ 1, '2' ]

定义函数的类型

/*
	interface fn{
		(形参:形参类型):返回值类型
	}
*/
interface ObjItf {
  name: string;
  age: number;
}
interface FnItf {
  (p: ObjItf): void;
}

let fn: FnItf = (obj) => {
  console.log(obj.name, obj.age);
};
fn({ name: "小苏同学", age: 18 });	// 小苏同学 18

注意：

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

接口继承

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

特点：具有父接口的属性类型

多个异名接口的继承

interface NameInfo {
  name: string;
}

interface AgeInfo {
  age: number;
}

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

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

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

多个同名接口的继承

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

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

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

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

缺省和只读特性

缺省：表示属性可以省掉，可有可无。

只读：表示属性不能修改

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

let obj: PersonInfo = {
  height: 175,
};
obj.height = 180;	// 报错，只读属性不能重新赋值