参考
https://github.com/zhongsp/TypeScript
TS入门篇 | 详解 TypeScript 接口类型
在JavaScript中，我们似乎很少听说接口这个概念，这是TypeScript中很常用的一个特性，它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。
一、为什么要使用接口
来看例子，函数的参数是一个对象，它包含两个字段：firstName 和 lastName，返回一个拼接后的完整名字：
const getFullName = ({ firstName, lastName }) => {
return `${firstName} ${lastName}`;
};
调用时传入参数：
getFullName({
firstName: "Hello",
lastName: "TypeScript"
});
这样调用是没有问题的，但是如果传入的参数不是想要的参数格式时，就会出现一些错误：
// Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
getFullName();
getFullName({ age: 18, phone: 110 }); // 'undefined undefined'
getFullName({ firstName: "Hello" }); // 'Hello undefined'
这些都是我们不想要的，在开发时难免会传入错误的参数，所以 TypeScript 能够在编译阶段就检测到这些错误。下面来完善下这个函数的定义：
const getFullName = ({
firstName,
lastName,
}: {
// 指定属性名为firstName和lastName的字段的属性值必须为string类型
firstName: string;
lastName: string;
}) => {
return `${firstName} ${lastName}`;
};
通过对象字面量的形式去限定传入的这个对象的结构，这些都是在编写代码时 TypeScript 提示的错误信息，这样就避免了在使用函数的时候传入不正确的参数。我们可以使用interface来定义接口：
interface Info {
firstName: string;
lastName: string;
}
const getFullName = ({ firstName, lastName }: Info) =>
return `${firstName} ${lastName}`;
};
注意：在定义接口时，不要把它理解为是在定义一个对象，{}括号包裹的是一个代码块，里面是声明语句，只不过声明的不是变量的值而是类型。声明也不用等号赋值，而是冒号指定类型。每条声明之前用换行分隔即可，也可以使用分号或者逗号。
二、接口属性
1.可选属性
在定义一些结构时，一些结构的某些字段的要求是可选的，有这个字段就做处理，没有就忽略，所以针对这种情况，TypeScript提供了可选属性。
interface Vegetables {
color?: string;
type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
return `A ${color ? color + " " : ""}${type}`;
};
这个函数中根据传入对象中的 color 和 type 来进行描述返回一句话，color 是可选的，所以可以给接口设置可选属性，在属性名后面加个?即可。
这里可能会报一个警告：接口应该以大写的i开头，可以在 tslint.json 的 rules 里添加"interface-name": [true, “never-prefix”]来关闭这条规则。
2.只读属性
接口可以设置只读属性，如下：
interface Role {
readonly 0: string;
readonly 1: string;
}
这里定义了一个角色，有 0 和 1 两种角色 id。下面定义一个角色数据，并修改一下它的值：
const role: Role = {
0: "super_admin",
1: "admin"
};
role[1] = "super_admin";
// Cannot assign to '0' because it is a read-only property
需要注意，readonly只是静态类型检测层面的只读，实际上并不能阻止对对象的修改。因为在转译为 JavaScript 之后，readonly 修饰符会被抹除。因此，任何时候与其直接修改一个对象，不如返回一个新的对象，这是一种比较安全的方式。
3.多余属性检查
interface Vegetables {
color?: string;
type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
return `A ${color ? color + " " : ""}${type}`;
};
getVegetables({
type: "tomato",
size: "big" // 'size'不在类型'Vegetables'中
});
这里没有传入 color 属性，因为它是一个可选属性，所以没有报错。但是多传入了一个 size 属性，这时就会报错，TypeScript就会提示接口上不存在这个多余的属性，所以只要是接口上没有定义这个属性，在调用时出现了，就会报错。
有时不希望TypeScript这么严格的对数据进行检查，比如上面的函数，只需要保证传入getVegetables的对象有type属性就可以了，至于实际使用的时候传入对象有没有多余的属性，多余属性的属性值是什么类型，我们就不管了，那就需要绕开多余属性检查，有如下方式：
a.使用类型断言
类型断言就是告诉 TypeScript，已经自行进行了检查，确保这个类型没有问题，希望 TypeScript 对此不进行检查，这是最简单的实现方式
interface Vegetables {
color?: string;
type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
return `A ${color ? color + " " : ""}${type}`;
};
getVegetables({
type: "tomato",
size: 12,
price: 1.2
} as Vegetables);
b.添加字符串索引签名
interface Vegetables {
color: string;
type: string;
[prop: string]: any;
}
const getVegetables = ({ color, type }: Vegetables) => {
return `A ${color ? color + " " : ""}${type}`;
};
getVegetables({
color: "red",
type: "tomato",
size: 12,
price: 1.2
});
三、接口定义函数类型
interface AddFunc {
(num1: number, num2: number): number;
}
const add: AddFunc = (n1, n2) => n1 + n2;
// 不能将类型'string'分配给类型'number'
const join: AddFunc = (n1, n2) => `${n1} ${n2}`;
// 类型'string'的参数不能赋给类型'number'的参数
add("a", 2);
上面定义的add函数接收两个数值类型的参数，返回的结果也是数值类型，所以没有问题。而join函数参数类型没错，但是返回的是字符串，所以会报错。而当调用add函数时，传入的参数如果和接口定义的类型不一致，也会报错。在实际定义函数的时候，名字是无需和接口中参数名相同的，只需要位置对应即可。
四、interface 和 type 区别
参考
Typescript 中的 interface 和 type 到底有什么区别
1.相同点：都可以描述一个对象或者函数
interface User {
name: string
age: number
}
interface SetUser {
(name: string, age: number): void;
}
type User = {
name: string
age: number
};
type SetUser = (name: string, age: number)=> void;
2.相同点：都允许拓展（extends）
interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
type Name = {
name: string;
}
type User = Name & { age: number };
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
interface Name {
name: string;
}
type User = Name & {
age: number;
}
3.不同点：type 可以而 interface 不行
type 可以声明基本类型别名，联合类型，元组等类型
// 基本类型别名
type Name = string
// 联合类型
interface Dog {
wong();
}
interface Cat {
miao();
}
type Pet = Dog | Cat
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]
type 语句中还可以使用 typeof 获取实例的 类型进行赋值
// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
其他骚操作
type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary;
type Callback = (data: T) => void;
type Pair = [T, T];
type Coordinates = Pair;
type Tree = T | { left: Tree, right: Tree };
4.interface 可以而 type 不行
interface 能够声明合并，即自动把多个同名的声明组合在一起。
interface User {
name: string
age: number
}
interface User {
sex: string
}
/*
User 接口为 {
name: string
age: number
sex: string
}
*/
注意，两个接口不能有冲突，否则报错：
interface User {
age: string
}
interface User {
age: number
}
5.总结
一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。
type 还可以定义字符串字面量类型，type x = 'a' | 'b' | 'c' 那么使用该类型只能从这三个值中取，不在的就会报错。另外使用type比较多的地方就是联合类型，如函数返回类型是type x = string | object | void，就不用一次次的写，复用性就高了。
6.literal-types.md
type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
animate(dx: number, dy: number, easing: Easing) {
if (easing === "ease-in") {
// ...
} else if (easing === "ease-out") {
} else if (easing === "ease-in-out") {
} else {
// It's possible that someone could reach this
// by ignoring your types though.
}
}
}
let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy");
// Error: Argument of type '"uneasy"' is not
assignable to parameter of type 'Easing'.
你可以传递三种允许的字符串，但是如果传递其他的字符串会收到如下错误：
Argument of type '"uneasy"' is not assignable to
parameter of type '"ease-in" | "ease-out" | "ease-in-out"'
目前 TypeScript 中有三种可用的字面量类型集合，分别是：字符串、数字和布尔值。通过使用字面量类型，你可以规定一个字符串、数字或布尔值必须含有的确定值。
interface ValidationSuccess {
isValid: true;
reason: null;
};
interface ValidationFailure {
isValid: false;
reason: string;
};
type ValidationResult =
| ValidationSuccess
| ValidationFailure;
五、类实现接口
interface ClockInterface {
currentTime: Date;
setTime(d: Date): void;
}
class Clock implements ClockInterface {
currentTime: Date = new Date();
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) {}
}
接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。
一个类不限于只能实现一个接口：
interface Animal{
readonly name:string;
eat(food:string):void;
sleep(hours:number):void;
}
interface Feline{
meow():void;
}
class Cat implements Animal,Feline{
name = 'Whiskers';
eat(food: string): void {
console.log('Ate some',food,'.Mmm!');
}
sleep(hours: number): void {
console.log('slept for',hours,'hours');
}
meow(): void {
console.log('meow');
}
}
六、继承多个接口
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
七、混合，接口中同时有属性和方法
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = function(start: number) {} as Counter;
counter.interval = 123;
counter.reset = function() {};
return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
接口可以声明实例属性，但不能有可见性修饰符(private/protected/public)，也不能使用static关键字，不过可以使用readonly。
八、实现接口还是抽象类
实现接口与实现抽象类差不多。区别是，接口更通用更轻量，抽象类更具体、功能更丰富。
接口是对结构建模的方式。在值层面可表示对象、数组、函数、类或类的实例。接口不生成JS代码，只存在于编译时。
抽象类只能对类建模，而且生成运行时代码，即JS类。抽象类可以有构造方法，可以提供默认实现，还能为属性和方法设计访问修饰符。这些在接口中都做不到。
具体使用哪个，取决于实际用途。如果多个类共用同一个实现，使用抽象类。如果需要一种轻量的方式表示这个类是T型，使用接口。