TypeScript 接口 interface 使用详解
共 10409字，需浏览 21分钟
·
2022-02-14 23:15
我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕，当然也欢迎加入前端猎手技术交流群😛，文末扫码我拉你进群，一起交流技术以及代码之外的一切🙆♀️
在 TypeScript中，接口是一个很重要的特性，它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。下面就来看看什么是接口类型。
一、接口定义
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
TypeScript 的核心原则之一是对值所具有的结构进行类型检查，并且只要两个对象的结构一致，属性和方法的类型一致，则它们的类型就是一致的。 在TypeScript里，接口的作用就是为这些类型命名和为代码或第三方代码定义契约。
TypeScript 接口定义形式如下：
interface interface_name { }
来看例子，函数的参数是一个对象，它包含两个字段：firstName 和 lastName，返回一个拼接后的完整名字：
const getFullName = ({ firstName, lastName }) => {
return `${firstName} ${lastName}`;
};
调用时传入参数：
getFullName({
firstName: "Hello",
lastName: "TypeScript"
});
这样调用是没有问题的，但是如果传入的参数不是想要的参数格式时，就会出现一些错误：
getFullName(); // Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
getFullName({ age: 18, phone: 110 }); // 'undefined undefined'
getFullName({ firstName: "Hello" }); // 'Hello undefined'
这些都是我们不想要的，在开发时难免会传入错误的参数，所以 TypeScript 能够在编译阶段就检测到这些错误。下面来完善下这个函数的定义：
const getFullName = ({
firstName,
lastName,
}: {
firstName: string; // 指定属性名为firstName和lastName的字段的属性值必须为string类型
lastName: string;
}) => {
return `${firstName} ${lastName}`;
};
通过对象字面量的形式去限定传入的这个对象的结构，现在再来看下之前的调用会出现什么提示：
getFullName(); // 应有1个参数，但获得0个
getFullName({ age: 18, phone: 110 }); // 类型“{ age: number; phone: number; }”的参数不能赋给类型“{ firstName: string; lastName: string; }”的参数。
getFullName({ firstName: "Hello" }); // 缺少必要属性lastName
这些都是在编写代码时 TypeScript 提示的错误信息，这样就避免了在使用函数的时候传入不正确的参数。我们可以使用interface来定义接口：
interface Info {
firstName: string;
lastName: string;
}
const getFullName = ({ firstName, lastName }: Info) =>
return `${firstName} ${lastName}`;
};
注意：在定义接口时，不要把它理解为是在定义一个对象，{}括号包裹的是一个代码块，里面是声明语句，只不过声明的不是变量的值而是类型。声明也不用等号赋值，而是冒号指定类型。每条声明之前用换行分隔即可，也可以使用分号或者逗号。
二、接口属性
1. 可选属性
在定义一些结构时，一些结构的某些字段的要求是可选的，有这个字段就做处理，没有就忽略，所以针对这种情况，TypeScript提供了可选属性。
定义一个函数：
const getVegetables = ({ color, type }) => {
return `A ${color ? color + " " : ""}${type}`;
};
这个函数中根据传入对象中的 color 和 type 来进行描述返回一句话，color 是可选的，所以可以给接口设置可选属性，在属性名后面加个?即可：
interface Vegetables {
color?: string;
type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
return `A ${color ? color + " " : ""}${type}`;
};
这里可能会报一个警告：接口应该以大写的i开头，可以在 tslint.json 的 rules 里添加"interface-name": [true, “never-prefix”]来关闭这条规则。
当属性被标注为可选后，它的类型就变成了显式指定的类型与 undefined 类型组成的联合类型，比如 getVegetables 方法的参数中的 color 属性类型就变成了这样：
string | undefined;
那下面的接口与上述接口是一样的吗？
interface Vegetables2 {
color?: string | undefined;
type: string;
}
答案肯定是否定的，因为可选意味着可以不设置属性键名，类型是 undefined 意味着属性键名不可选。
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
这里TypeScript 提示不能分配给索引0，因为它是只读属性。
在ES6中，使用const定义的常量定义之后不能再修改，这和只读意思接近。那readonly和const在使用时该如何选择呢？那主要看这个值的用途，如果是定义一个常量，那用const，如果这个值是作为对象的属性，就用readonly：
const NAME: string = "TypeScript";
NAME = "Haha"; // Uncaught TypeError: Assignment to constant variable
const obj = {
name: "TypeScript"
};
obj.name = "Haha";
interface Info {
readonly name: string;
}
const info: Info = {
name: "TypeScript"
};
info["name"] = "Haha"; // Cannot assign to 'name' because it is a read-only property
上面使用const定义的常量NAME定义之后再修改会报错，但是如果使用const定义一个对象，然后修改对象里属性的值是不会报错的。所以如果要保证对象的属性值不可修改，需要使用readonly。
需要注意，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就会提示接口上不存在这个多余的属性，所以只要是接口上没有定义这个属性，在调用时出现了，就会报错。
注意： 这里可能会报一个警告：属性名没有按开头字母顺序排列属性列表，可以在 tslint.json 的 rules 里添加"object-literal-sort-keys": [false]来关闭这条规则。
有时 不希望TypeScript这么严格的对数据进行检查，比如上面的函数，只需要保证传入getVegetables的对象有type属性就可以了，至于实际使用的时候传入对象有没有多余的属性，多余属性的属性值是什么类型，我们就不管了，那就需要绕开多余属性检查，有如下方式：
(1) 使用类型断言
类型断言就是告诉 TypeScript，已经自行进行了检查，确保这个类型没有问题，希望 TypeScript 对此不进行检查，这是最简单的实现方式，类型断言使用 as 关键字来定义（这里不细说，后面进阶篇会专门介绍类型断言）：
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);
(2) 添加索引签名
更好的方式是添加字符串索引签名：
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
});
三、接口使用
1. 定义函数类型
在前面函数类型篇我们说了，可以使用接口来定义函数类型：
interface AddFunc {
(num1: number, num2: number): number;
}
这里定义了一个AddFunc结构，这个结构要求实现这个结构的值，必须包含一个和结构里定义的函数一样参数、一样返回值的方法，或者这个值就是符合这个函数要求的函数。把花括号里包着的内容称为调用签名，它由带有参数类型的参数列表和返回值类型组成：
const add: AddFunc = (n1, n2) => n1 + n2;
const join: AddFunc = (n1, n2) => `${n1} ${n2}`; // 不能将类型'string'分配给类型'number'
add("a", 2); // 类型'string'的参数不能赋给类型'number'的参数
上面定义的add函数接收两个数值类型的参数，返回的结果也是数值类型，所以没有问题。而join函数参数类型没错，但是返回的是字符串，所以会报错。而当调用add函数时，传入的参数如果和接口定义的类型不一致，也会报错。在实际定义函数的时候，名字是无需和接口中参数名相同的，只需要位置对应即可。
实际上，很少使用接口类型来定义函数类型，更多使用内联类型或类型别名配合箭头函数语法来定义函数类型：
type AddFunc = (num1: number, num2: number) => number;
这里给箭头函数类型指定了一个别名 AddFunc，在其他地方就可以直接复用 AddFunc，而不用重新声明新的箭头函数类型定义。
2. 定义索引类型
在实际工作中，使用接口类型较多的地方是对象，比如 React 组件的 Props & State等，这些对象有一个共性，即所有的属性名、方法名都是确定的。
实际上，经常会把对象当 Map 映射使用，比如下边代码中定义了索引是任意数字的对象 role1 和索引是任意字符串的对象 role2。
const role1 = {
0: "super_admin",
1: "admin"
};
const role2 = {
s: "super_admin",
a: "admin"
};
这时需要使用索引签名来定义上边提到的对象映射结构，并通过 “[索引名: 类型]”的格式约束索引的类型。索引名称的类型分为 string 和 number 两种，通过如下定义的 RoleDic 和 RoleDic1 两个接口，可以用来描述索引是任意数字或任意字符串的对象：
interface RoleDic {
[id: number]: string;
}
interface RoleDic1 {
[id: string]: string;
}
const role1: RoleDic = {
0: "super_admin",
1: "admin"
};
const role2: RoleDic = {
s: "super_admin", // error 不能将类型"{ s: string; a: string; }"分配给类型"RoleDic"。
a: "admin"
};
const role3: RoleDic = ["super_admin", "admin"];
需要注意，当使用数字作为对象索引时，它的类型既可以与数字兼容，也可以与字符串兼容，这与 JavaScript 的行为一致。因此，使用 0 或 '0' 索引对象时，这两者等价。
上面的 role3 定义了一个数组，索引为数值类型，值为字符串类型。我们还可以给索引设置readonly，从而防止索引返回值被修改：
interface RoleDic {
readonly [id: number]: string;
}
const role: RoleDic = {
0: "super_admin"
};
role[0] = "admin"; // error 类型"RoleDic"中的索引签名仅允许读取
注意，可以设置索引类型为 number。但是这样如果将属性名设置为字符串类型，则会报错；但是如果设置索引类型为字符串类型，那么即便属性名设置的是数值类型，也没问题。因为 JS 在访问属性值时，如果属性名是数值类型，会先将数值类型转为字符串，然后再去访问：
const obj = {
123: "a",
"123": "b" // 报错：标识符“"123"”重复。
};
console.log(obj); // { '123': 'b' }
如果数值类型的属性名不会转为字符串类型，那么这里数值123和字符串123是不同的两个值，则最后对象obj应该同时有这两个属性；但是实际打印出来的obj只有一个属性，属性名为字符串"123"，值为"b"，说明数值类型属性名123被覆盖掉了，就是因为它被转为了字符串类型属性名"123"；又因为一个对象中多个相同属性名的属性，定义在后面的会覆盖前面的，所以结果就是obj只保留了后面定义的属性值。
四、高级用法
1. 继承接口
在 TypeScript 中，接口是可以继承，这和ES6中的类一样，这提高了接口的可复用性。来看一个场景：定义一个Vegetables接口，它会对color属性进行限制。再定义两个接口Tomato和Carrot，这两个类都需要对color进行限制，而各自又有各自独有的属性限制，可以这样定义：
interface Vegetables {
color: string;
}
interface Tomato {
color: string;
radius: number;
}
interface Carrot {
color: string;
length: number;
}
三个接口中都有对color的定义，但是这样写很繁琐，可以用继承来改写：
interface Vegetables {
color: string;
}
interface Tomato extends Vegetables {
radius: number;
}
interface Carrot extends Vegetables {
length: number;
}
const tomato: Tomato = {
radius: 1.2 // error Property 'color' is missing in type '{ radius: number; }'
};
const carrot: Carrot = {
color: "orange",
length: 20
};
上面定义的 tomato 变量因为缺少了从Vegetables接口继承来的 color 属性，所以报错了。
一个接口可以被多个接口继承，同样，一个接口也可以继承多个接口，多个接口用逗号隔开。比如再定义一个Food接口，Tomato 也可以继承 Food：
interface Vegetables {
color: string;
}
interface Food {
type: string;
}
interface Tomato extends Food, Vegetables {
radius: number;
}
const tomato: Tomato = {
type: "vegetables",
color: "red",
radius: 1
};
如果想要覆盖掉继承的属性，那就只能使用兼容的类型进行覆盖：
interface Tomato extends Vegetables {
color: number;
}
这里我们将color属性进行了覆盖，并将其类型设置为了number类型，这时就会报错，因为Tomato 和 Vegetables 中的name属性是不兼容的。
2. 混合类型接口
在 JavaScript 中，函数是对象类型。对象可以有属性，所以有时一个对象既是一个函数，也包含一些属性。比如要实现一个计数器函数，比较直接的做法是定义一个函数和一个全局变量：
let count = 0;
const counter = () => count++;
但是这种方法需要在函数外面定义一个变量，更优一点的方法是使用闭包：
const counter = (() => {
let count = 0;
return () => {
return count++;
};
})();
console.log(counter()); // 1
console.log(counter()); // 2
TypeScript 支持直接给函数添加属性，这在 JavaScript 中是支持的：
let counter = () => {
return counter.count++;
};
counter.count = 0;
console.log(counter()); // 1
console.log(counter()); // 2
这里把一个函数赋值给countUp，又给它绑定了一个属性count，计数保存在这个 count 属性中。
可以使用混合类型接口来指定上面例子中 counter 的类型：
interface Counter {
(): void;
count: number;
}
const getCounter = (): Counter => {
const c = () => {
c.count++;
};
c.count = 0;
return c;
};
const counter: Counter = getCounter();
counter();
console.log(counter.count); // 1
counter();
console.log(counter.count); // 2
这里定义了一个Counter接口，这个结构必须包含一个函数，函数的要求是无参数，返回值为void，即无返回值。而且这个结构还必须包含一个名为count、值的类型为number类型的属性。最后，通过getCounter函数得到这个计数器。这里 getCounter 的类型为Counter，它是一个函数，无返回值，即返回值类型为void，它还包含一个属性count，属性返回值类型为number。
五、类型别名
类型别名并不属于接口类型的内容，但是它和接口功能类似，所以这里放在一起来说。
1. 基本使用
接口类型的作用就是将内联类型抽离出来，从而实现类型复用。其实，还可以使用类型别名接收抽离出来的内联类型实现复用。可以通过如下所示“type 别名名字 = 类型定义”的格式来定义类型别名，比如上面定义的计数器方法的类型：
type Counter = {
(): void;
count: number;
}
这样写看起来就像是在JavaScript中定义变量，只不过是把var、let、const换成了type。实际上，类型别名可以在接口类型无法覆盖的场景中使用，比如联合类型、交叉类型等：
// 联合类型
type Name = number | string;
// 交叉类型
type Vegetables = {color: string, radius: number} & {color: string, length: number}
这里定义了一个 Vegetables 类型别名，表示两个匿名接口类型交叉出的类型。
需要注意：类型别名只是给类型取了一个别名，并不是创建了一个新的类型。
2. 与接口区别
通过上面的介绍，可以发现多数情况下是可以使用类型别名来替代的，那这是否说明这两者是等价的呢？答案肯定是否定的，不然也不会出这两个概念。在某些特定的场景下，这两者还是存在很大区别。比如，重复定义的接口类型，它的属性会叠加，这个特性使得我们可以很方便地对全局变量、第三方库的类型做扩展：
interface Vegetables {
color: string;
}
interface Vegetables {
radius: number;
}
interface Vegetables {
length: number;
}
let vegetables: Vegetables = {
color: "red",
radius: 2,
length: 10
}
这里我们定义了三次 Vegetables 接口，此时可以赋值给变一个包含color、radius、length的对象，并且不会报错。
如果重复定义类型别名：
type Vegetables = {
color: string;
}
type Vegetables = {
radius: number;
}
type Vegetables = {
length: number;
}
let vegetables: Vegetables = {
color: "red",
radius: 2,
length: 10
}
上述代码就会报错：'Vegetables' is already defined。所以，接口类型是可重复定义且属性会叠加的，而类型别名是不可重复定义的。
很感谢小伙伴看到最后😘，如果您觉得这篇文章有帮助到您的的话不妨关注➕+点赞👍+收藏📌+评论📜，您的支持就是我更新的最大动力。
欢迎加入前端猎手技术交流群😛，文末扫码加我微信，我拉你进群，一起交流技术以及代码之外的一切🙆♀️