TypeScript 中 Enum 枚举类型、interface 接口类型

TIP

从本节正式开始学习 Enum 枚举类型、interface 接口类型的核心基础 和 应用实践。

• Enum 枚举类型
• interface 接口类型

一、枚举类型

TIP

观察以下代码，这是一个角色判断的案例：一般系统都会有很多种角色，每个角色都会有不同的操作权限，同时也会对应不同的 UI 界面。

一般用户登录系统时，会做一些初始化的工作，如下代码所示

// 初始化角色权限
function initByRole(role) {
  if (role === 1 || role === 2) {
    // ...
  } else if (role === 3 || role === 4) {
    // ...
  } else if (role === 5) {
    // ...
  } else {
    // ...
  }
}

注：以上代码的问题

• ①、可读性差：如果不借助特殊的文档，很难记住数字的含义
• ②、可维护性差：代表角色的数字都被硬编码了，如果某一天这些数字需要发生改变，就会牵一发而动全身，成本和风险就是灾难级的

如何解决这种问题呢，就可以使用 TS 的枚举类型，这是在 ES 中没有的数据类型

1、什么是枚举

TIP

枚举：一组有名字的常量集合

我们可以把它理解成手机里的通讯录，在拨打电话时，只需要记住人名即可，而不别真正去记住她的电话号码。更何况电话号码是可变的，人名基本是不会变的。

同时，枚举类型分为数字枚举 和 字符串枚举

2、数字枚举

TIP

使用 enum 关键字定义一个数字枚举，该枚举包含了 5 个枚举成员，它们的取值从零开始

// 数字枚举
enum Role {
  SuperAdministrator,
  Administrators,
  OrdinaryAdministrator,
  User,
  Developer,
}

// 声明了一个 Enum 结构 Role，里面包含五个成员
// 第一个成员的值默认为整数0，第二个为1，第三个为2，以此类推。

// 第一个枚举成员的值，默认值为 0，往后依次递增
console.log(Role.SuperAdministrator); // 0

使用时，调用 Enum 的某个成员，与调用对象属性的写法一样，可以使用点运算符，也可以使用方括号运算符。

enum Role {
  SuperAdministrator,
  Administrators,
  OrdinaryAdministrator,
  User,
  Developer,
}

let u = Role.User; // 3

// 等同于
let u1 = Role["User"];

console.log(u, u1); // 3 3

Enum 结构本身也是一种类型。比如，上例的变量u等于3，它的类型可以是 Role，也可以是number。

let r1: Role = Role.User; // 正确
let r2: number = Role.User; // 正确

console.log(r1, r2); // 3 3

// 变量 r1 和 r2 的类型写成 Role 或 number 都可以。但是，Role 类型的语义更好

2.1、自定义枚举的初始值

TIP

枚举可定义初始值，给第一个枚举成员设置初始值，后边的枚举成员会在此基础上依次递增

// 数字枚举
enum Role {
  // 自定义数字枚举的初始值为 1，默认从0开始
  SuperAdministrator = 1,
  Administrators,
  OrdinaryAdministrator,
  User,
  Developer,
}

// 第一个枚举成员的值，默认值为 0，往后依次递增
// 如果给第一个枚举成员初始值，后边的枚举成员会在此基础上递增
console.log(Role.SuperAdministrator); // 1

// 打印输出枚举
console.log(Role);

枚举在运行环境下，被编译成了一个对象，除了正常的枚举成员之外还多了一些其他成员。

注：

这时，如果我们需要获取枚举成员的值即可通过枚举成员的名称来索引，还可以通过值来索引。

2.2、枚举的实现原理

TIP

它是如何实现的 ？ 可在 TypeScript - Playground (opens new window) 中编译查看编译后的 JS 代码

注：

查看编译后的 JS 代码可以看到

枚举被编译成了一个对象，枚举成员的名称被作为 key ，枚举成员的值被作为了 value，这个表达式直接返回了 value 。然后 value 又被作为了 key，成员的名称又被作为了 value。

这种方法叫做：反向映射，这就是枚举的实现原理。

3、Enum 结构的特别之处

TIP

Enum 结构的特别之处在于，它既是一种类型，也是一个值。

绝大多数 TypeScript 语法都是类型语法，编译后会全部去除，但是 Enum 结构是一个值，编译后会变成 JavaScript 对象，留在代码中。

// 编译前
enum Color {
  Red, // 0
  Green, // 1
  Blue, // 2
}

// 编译后
let Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
};

//  Enum 结构编译前后的对比

4、Enum 应用场景

TIP

由于 TypeScript 的定位是 JavaScript 语言的类型增强，所以官方建议谨慎使用 Enum 结构，因为它不仅仅是类型，还会为编译后的代码加入一个对象。

Enum 结构比较适合的场景是，成员的值不重要，名字更重要，从而增加代码的可读性和可维护性。

enum Operator {
  ADD,
  DIV,
  MUL,
  SUB,
}

function compute(op: Operator, a: number, b: number) {
  switch (op) {
    case Operator.ADD:
      return a + b;
    case Operator.DIV:
      return a / b;
    case Operator.MUL:
      return a * b;
    case Operator.SUB:
      return a - b;
    default:
      throw new Error("wrong operator");
  }
}

const res = compute(Operator.ADD, 3, 6);
console.log(res); // 9

// Enum 结构 Operator 的四个成员表示四则运算“加减乘除”
// 代码根本不需要用到这四个成员的值，只用成员名就够了

5、Enum 注意事项

TIP

TypeScript 5.0 (opens new window) 之前，Enum 有一个 Bug，就是 Enum 类型的变量可以赋值为任何数值。

enum Bool {
  No,
  Yes,
}

function foo(noYes: Bool) {
  // ...
}

foo(22); // TypeScript 5.0 之前不报错

// 函数foo的参数noYes是 Enum 类型，只有两个可用的值
// 但是，TypeScript 5.0 之前，任何数值作为函数foo的参数，编译都不会报错，TypeScript 5.0 纠正了这个问题

另外，由于 Enum 结构编译后是一个对象，所以不能有与它同名的变量（包括对象、函数、类等）。

enum Color {
  Red,
  Green,
  Blue,
}

const Color = "red"; // 报错

// Enum 结构与变量同名，导致报错

很大程度上，Enum 结构可以被对象的as const断言替代。

enum Foo {
  A,
  B,
  C,
}

const Bar = {
  A: 0,
  B: 1,
  C: 2,
} as const;

if (x === Foo.A) {
}
// 等同于
if (x === Bar.A) {
}

// 对象Bar使用了as const断言，作用就是使得它的属性无法修改
// 这样的话，Foo 和 Bar的行为就很类似了，前者完全可以用后者替代，而且后者还是 JavaScript 的原生数据结构。

6、Enum 成员的值

TIP

Enum 成员默认不必赋值，系统会从零开始逐一递增，按照顺序为每个成员赋值，比如 0、1、2……

但是，也可以为 Enum 成员显式赋值。

enum Color {
  Red,
  Green,
  Blue,
}

// 等同于
enum Color {
  Red = 0,
  Green = 1,
  Blue = 2,
}

// Enum 每个成员的值都是显式赋值

成员的值可以是任意数值，但不能是大整数（Bigint）

enum Color {
  Red = 90,
  Green = 0.5,
  Blue = 7n, // 报错
}

// Enum 成员的值可以是小数，但不能是 Bigint

成员的值甚至可以相同

enum Color {
  Red = 0,
  Green = 0,
  Blue = 0,
}

如果只设定第一个成员的值，后面成员的值就会从这个值开始递增。

enum Color {
  Red = 6,
  Green, // 7
  Blue, // 8
}

// 或者
enum Color {
  Red, // 0
  Green = 6,
  Blue, // 7
}

Enum 成员的值也可以使用计算式。

enum Permission {
  UserRead = 1 << 8,
  UserWrite = 1 << 7,
  UserExecute = 1 << 6,
  GroupRead = 1 << 5,
  GroupWrite = 1 << 4,
  GroupExecute = 1 << 3,
  AllRead = 1 << 2,
  AllWrite = 1 << 1,
  AllExecute = 1 << 0,
}

enum Bool {
  No = 123,
  Yes = Math.random(),
}

// Enum 成员的值等于一个计算式，或者等于函数的返回值，都是正确的。

Enum 成员值都是只读的，不能重新赋值。

enum Color {
  Red,
  Green,
  Blue,
}

Color.Red = 5; // 报错

// 重新为 Enum 成员赋值就会报错

为了让这一点更醒目，通常会在 enum 关键字前面加上const修饰，表示这是常量，不能再次赋值

const enum Color {
  Red,
  Green,
  Blue,
}

加上const还有一个好处，就是编译为 JavaScript 代码后，代码中 Enum 成员会被替换成对应的值，这样能提高性能表现。

const enum Color {
  Red,
  Green,
  Blue,
}

const x = Color.Red;
const y = Color.Green;
const z = Color.Blue;

// 编译后
const x = 0; /* Color.Red */
const y = 1; /* Color.Green */
const z = 2; /* Color.Blue */

// 由于 Enum 结构前面加了const关键字，所以编译产物里面就没有生成对应的对象，而是把所有 Enum 成员出现的场合，都替换成对应的常量

注：

如果希望加上const关键词后，运行时还能访问 Enum 结构（即编译后依然将 Enum 转成对象），需要在编译时打开preserveConstEnums编译选项。

7、同名 Enum 的合并

TIP

多个同名的 Enum 结构会自动合并

enum Foo {
  A,
}

enum Foo {
  B = 1,
}

enum Foo {
  C = 2,
}

// 等同于
enum Foo {
  A,
  B = 1，
  C = 2
}

// Foo 分成三段定义，系统会自动把它们合并

Enum 结构合并时，只允许其中一个的首成员省略初始值，否则报错。

enum Foo {
  A,
}

enum Foo {
  B, // 报错
}

// Foo 的两段定义的第一个成员，都没有设置初始值，导致报错

同名 Enum 合并时，不能有同名成员，否则报错。

enum Foo {
  A,
  B,
}

enum Foo {
  B = 1, // 报错
  C,
}

// Foo 的两段定义有一个同名成员 B，导致报错

同名 Enum 合并的另一个限制是，所有定义必须同为 const 枚举或者非 const 枚举，不允许混合使用。

// 正确
enum E {
  A,
}
enum E {
  B = 1,
}

// 正确
const enum E {
  A,
}
const enum E {
  B = 1,
}

// 报错
enum E {
  A,
}
const enum E {
  B = 1,
}

// 同名 Enum 的合并，最大用处就是补充外部定义的 Enum 结构

8、字符串枚举

TIP

Enum 成员的值除了设为数值，还可以设为字符串。也就是说，Enum 也可以用作一组相关字符串的集合。

枚举成员的值是 字符串，它就是字符串枚举

// 字符串枚举
enum Message {
  Success = "成功",
  Fail = "失败",
}

// Message 就是字符串枚举，每个成员的值都是字符串

在 TypeScript - Playground (opens new window) 中编译查看编译后的 JS 代码

注：

从以上编译后的 JS 可以看出，只有枚举成员的名称被作为了 key ，就是说字符串枚举是不可以进行反向映射的。

8.1、字符串枚举 - 注意事项

TIP

字符串枚举的所有成员值，都必须显式设置。

如果没有设置，成员值默认为数值，且位置必须在字符串成员之前。

enum Foo {
  A, // 0
  B = "icoding",
  C, // 报错
}

// A 之前没有其他成员，所以可以不设置初始值，默认等于 0；
// C 之前有一个字符串成员，所以 C 必须有初始值，不赋值就报错了。

Enum 成员可以是字符串和数值混合赋值

enum Enum {
  One = "One",
  Two = "Two",
  Three = 3,
  Four = 4,
}

除了数值和字符串，Enum 成员不允许使用其他值（比如 Symbol 值）。

变量类型如果是字符串 Enum，就不能再赋值为字符串，这跟数值 Enum 不一样。

enum MyEnum {
  One = "One",
  Two = "Two",
}

let s = MyEnum.One;
s = "One"; // 报错

// 变量 s 的类型是 MyEnum，再赋值为字符串就报错

由于这个原因，如果函数的参数类型是字符串 Enum，传参时就不能直接传入字符串，而要传入 Enum 成员。

enum MyEnum {
  One = "One",
  Two = "Two",
}

function f(arg: MyEnum) {
  return "arg is " + arg;
}

f("One"); // 报错

// 参数类型是 MyEnum，直接传入字符串会报错

所以，字符串 Enum 作为一种类型，有限定函数参数的作用。

前面说过，数值 Enum 的成员值往往不重要。但是有些场合，开发者可能希望 Enum 成员值可以保存一些有用的信息，所以 TypeScript 才设计了字符串 Enum。

const enum MediaTypes {
  JSON = "application/json",
  XML = "application/xml",
}

const url = "localhost";

fetch(url, {
  headers: {
    Accept: MediaTypes.JSON,
  },
}).then((response) => {
  // ...
});

// 函数 fetch() 的参数对象的属性 Accept，只能接受一些指定的字符串
// 这时就很适合把字符串放进一个 Enum 结构，通过成员值来引用这些字符串。

字符串 Enum 可以使用联合类型（union）代替。

function move(where: "Up" | "Down" | "Left" | "Right") {
  // ...
}

// 函数参数 wher e属于联合类型，效果跟指定为字符串 Enum 是一样的。

注意，字符串 Enum 的成员值，不能使用表达式赋值。

enum MyEnum {
  A = "one",
  B = ["T", "w", "o"].join(""), // 报错
}

// 成员 B 的值是一个字符串表达式，导致报错

9、keyof 运算符

TIP

keyof 运算符可以取出 Enum 结构的所有成员名，作为联合类型返回。

enum MyEnum {
  A = "a",
  B = "b",
}

// 'A'|'B'
type Foo = keyof typeof MyEnum;

// keyof typeof MyEnum 可以取出 MyEnum 的所有成员名，所以类型 Foo 等同于联合类型 'A'|'B'

9.1、keyof 运算符 - 注意事项

TIP

这里的typeof是必需的，否则keyof MyEnum相当于keyof number

type Foo = keyof MyEnum;
// "toString" | "toFixed" | "toExponential" |
// "toPrecision" | "valueOf" | "toLocaleString"

// 类型 Foo 等于类型 number 的所有原生属性名组成的联合类型

这是因为 Enum 作为类型，本质上属于number或string的一种变体，而typeof MyEnum会将MyEnum当作一个值处理，从而先其转为对象类型，就可以再用keyof运算符返回该对象的所有属性名。

如果要返回 Enum 所有的成员值，可以使用in运算符。

enum MyEnum {
  A = "a",
  B = "b",
}

// { a: any, b: any }
type Foo = { [key in MyEnum]: any };

// 采用属性索引可以取出 MyEnum 的所有成员值

10、异构枚举

TIP

数字枚举 和 字符串枚举 混用，就构成了 异构枚举。

当然，这种情况容易引起混淆。因此不建议使用 ！

// 异构枚举
enum Answer {
  N,
  Y = "Yes",
}

11、枚举成员的性质

TIP

枚举成员的值是一个只读类型，因此定义之后是不能修改的。

// 数字枚举
enum Role {
  // 自定义数字枚举的初始值为 1，默认从0开始
  SuperAdministrator = 1,
  Administrators,
  OrdinaryAdministrator,
  User,
  Developer,
}

// 修改枚举成员的值，编辑器会报错（枚举成员的值是一个只读类型）
// 因此枚举成员的值定义后是不能修改的
Role.SuperAdministrator = 2;

12、枚举成员的分类

TIP

枚举成员的分为两类

①、const enum 常量枚举，有三种情况

• 没有初始值的
• 对已有枚举成员的引用
• 常量的表达式

②、computed enum 需要被计算的枚举成员（非常量的表达式）

• 这些枚举成员的值不会在编译阶段进行计算，而会被保留到程序执行阶段

// 枚举成员
enum Char {
    // const enum 常量枚举，有三种情况（a，b，c）
    // 1、没有初始值
    a,
    // 2、对已有枚举成员的引用
    b = Char.a,
    // 3、常量的表达式
    c = 1 + 2,

    // computed enum 需要被计算的枚举成员（非常量的表达式）
    // 这些枚举成员的值不会在编译阶段进行计算，而会被保留到程序执行阶段
    d = Math.random(),
    e = '123'.length

    // 如果定义在 computed enum 后边的枚举成员，必须要有一个 初始值，否则会报错
    // f
    f = 3
}

在 TypeScript - Playground (opens new window) 中编译查看编译后的 JS 代码

注：

通过以编译后的 JS 代码可看到

• 常量枚举成员，已经被计算出了结果，分别是 0、0、3
• 需要被计算的枚举成员，它的值被保留了，需要在运行时环境才会被计算

如果定义在 computed enum 后边的枚举成员，必须要有一个 初始值，否则会报错

13、常量枚举

TIP

用 const 声明的枚举 就是 常量枚举

常量枚举的特性：会在编译阶段被移除

// 常量枚举
const enum Month {
  Jan,
  Feb,
  Mar,
  Apr,
  May,
  Jun,
}

在 TypeScript - Playground (opens new window) 中编译查看编译后的 JS 代码，发现编译后没有任何代码

常量枚举的作用：当我们不需要一个对象，而需要对象的值的时候，就可以使用 常量枚举。这样会减少我们在编译环境的代码。

如：定义一个变量，它的取值定义为一些常量枚举

// 常量枚举
const enum Month {
  Jan,
  Feb,
  Mar,
  Apr,
  May,
  Jun,
}
// 定义一个变量，它的取值定义为一些常量枚举
let month = [Month.Jan, Month.Feb, Month.Mar];

在 TypeScript - Playground (opens new window) 中编译查看编译后的 JS 代码

注：

从以上编译后的 JS 代码中，枚举已经被直接替换成了常量，这样我们在运行时的代码就会变得非常简洁。

14、枚举类型

TIP

在某些情况下，枚举 和 枚举成员都可以作为一种单独的类型存在。

• 情况 1：枚举成员没有任何初始值
• 情况 2：所有成员都是数字枚举
• 情况 3：所有成员都是字符串枚举

// 枚举类型

// 枚举成员没有任何初始值
enum A {
  a,
  b,
}
// 所有成员都是数字枚举
enum B {
  a = 1,
  b = 2,
}
// 所有成员都是字符串枚举
enum C {
  a = "icoding",
  b = "艾编程",
}

// 定义了两个枚举类型 a 和 b
// 我们可以将任意的 number 类型赋值给枚举类型
// 它的取值也可以超出枚举成员的定义
let a: A = 6;
let b: B = 6;

// 两种不同类型的枚举是不可以进行比较的，编辑器会提示报错
a === b;

// 定义了三种枚举成员类型 a1、a2、a3
let a1: A.a = 1;
let a2: A.b;

// a1 和 a2 是不可以比较的，不是相同的枚举成员类型
a1 === a2;

let a3: A.a = 1;
// a1 和 a3 是相同的枚举成员类型，可以进行比较
a1 === a3;

// 字符串枚举的取值只能是 枚举成员的类型
let c1: C = C.b; // 取值可以是 G.a 或 G.b
let c2: C.a = C.a; // C.a 的取值只能是它自身

15、总结

TIP

关于 TS 的枚举类型，需要我们掌握一种思维方法：将程序中不容易记忆的硬编码 或 在未来中可能改变的常量抽取出来，定义成枚举类型。

这样可以提高我们程序的可读性 和 可维护性，枚举类型可以使我们的程序以不变应万变。

二、interface 接口

TIP

接口在 TS 中是一个非常重要的概念，接口可以用来约束对象、函数、以及类的结构 和 类型，这是一种代码协作的契约，我们必须遵守而且不能改变。

1、什么是 interface 接口

TIP

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

interface User {
  id: number;
  username: string;
  age: number;
}

// 定义了一个接口 User，它指定一个对象模板，拥有三个属性 id、username 和 age
// 任何实现这个接口的对象，都必须部署这三个属性，并且必须符合规定的类型

实现该接口很简单，只要指定它作为对象的类型即可。

const u: User = {
  id: 1001,
  username: "icoding",
  age: 18,
};

// 变量 u 的类型就是接口 User，所以必须符合 User 指定的结构

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

interface Foo {
  a: string;
}

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

// Foo['a'] 返回属性a的类型，所以类型 A 就是 string

2、interface 表示对象的 5 种语法

TIP

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

• 对象属性
• 对象的属性索引
• 对象方法
• 函数
• 构造函数

2.1、对象属性

interface Point {
  x: number;
  y: number;
}

// x 和 y 都是对象的属性，分别使用冒号指定每个属性的类型

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

如果属性是可选的，就在属性名后面加一个问号。

interface Foo {
  x?: string;
}

如果属性是只读的，需要加上readonly修饰符。

interface A {
  readonly a: string;
}

2.2、对象的属性索引

interface A {
  [prop: string]: number;
}

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

属性索引共有string、number和symbol三种类型。

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

interface MyObj {
  [prop: string]: number;

  a: boolean; // 编译错误
}

// 属性索引指定所有名称为字符串的属性，它们的属性值必须是数值（number）
// 属性 a 的值为布尔值就报错了

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

interface A {
  [prop: number]: string;
}

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

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

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

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

interface A {
  [prop: string]: number;
  [prop: number]: string; // 报错
}

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

// 数值索引的属性值类型与字符串索引不一致，就会报错
// 数值索引必须兼容字符串索引的类型声明

2.3、对象的方法

TIP

对象的方法共有三种写法

// 写法一
interface A {
  f(x: boolean): string;
}

// 写法二
interface B {
  f: (x: boolean) => string;
}

// 写法三
interface C {
  f: { (x: boolean): string };
}

属性名可以采用表达式，所以下面的写法也是可以的。

const f = "f";

interface A {
  [f](x: boolean): string;
}

类型方法可以重载

interface A {
  f(): number;
  f(x: boolean): boolean;
  f(x: string, y: string): string;
}

interface 里面的函数重载，不需要给出实现。但是，由于对象内部定义方法时，无法使用函数重载的语法，所以需要额外在对象外部给出函数方法的实现。

interface A {
  f(): number;
  f(x: boolean): boolean;
  f(x: string, y: string): string;
}

function MyFunc(): number;
function MyFunc(x: boolean): boolean;
function MyFunc(x: string, y: string): string;
function MyFunc(x?: boolean | string, y?: string): number | boolean | string {
  if (x === undefined && y === undefined) return 1;
  if (typeof x === "boolean" && y === undefined) return true;
  if (typeof x === "string" && typeof y === "string") return "hello";
  throw new Error("wrong parameters");
}

const a: A = {
  f: MyFunc,
};

// 接口 A 的方法 f() 有函数重载，需要额外定义一个函数 MyFunc() 实现这个重载，然后部署接口 A 的对象 a 的属性 f 等于函数 MyFunc() 就可以了。

2.4、函数

TIP

interface 也可以用来声明独立的函数

interface Add {
  (x: number, y: number): number;
}

const myAdd: Add = (x, y) => x + y;

// 接口 Add 声明了一个函数类型

2.5、构造函数

TIP

interface 内部可以使用new关键字，表示构造函数。

interface ErrorConstructor {
  new (message?: string): Error;
}

// 接口 ErrorConstructor 内部有 new 命令，表示它是一个构造函数

TypeScript 里面，构造函数特指具有constructor属性的类，在 Class 类中会详细讲解

3、interface 的继承

TIP

interface 可以继承其他类型

• interface 继承 interface
• interface 继承 type
• interface 继承 class

3.1、interface 继承 interface

TIP

interface 可以使用extends关键字，继承其他 interface。

interface Shape {
  name: string;
}

interface Circle extends Shape {
  radius: number;
}

// Circle 继承了 Shape，所以 Circle 其实有两个属性 name 和 radius
// 这时，Circle 是子接口，Shape 是父接口

extends关键字会从继承的接口里面拷贝属性类型，这样就不必书写重复的属性。

interface 允许多重继承

interface Style {
  color: string;
}

interface Shape {
  name: string;
}

interface Circle extends Style, Shape {
  radius: number;
}

// Circle 同时继承了 Style 和 Shape，所以拥有三个属性 color、name 和 radius

多重接口继承，实际上相当于多个父接口的合并。

如果子接口与父接口存在同名属性，那么子接口的属性会覆盖父接口的属性。注意，子接口与父接口的同名属性必须是类型兼容的，不能有冲突，否则会报错。

interface Foo {
  id: string;
}

interface Bar extends Foo {
  id: number; // 报错
}

// Bar 继承了 Foo，但是两者的同名属性 id 的类型不兼容，导致报错。

多重继承时，如果多个父接口存在同名属性，那么这些同名属性不能有类型冲突，否则会报错。

interface Foo {
  id: string;
}

interface Bar {
  id: number;
}

// 报错
interface Baz extends Foo, Bar {
  type: string;
}

// Baz 同时继承了 Foo 和 Bar，但是后两者的同名属性 id 有类型冲突，导致报错。

3.2、interface 继承 type

TIP

interface 可以继承type命令定义的对象类型。

type Person = {
  username: string;
  age: number;
};

interface Allen extends Person {
  height: number;
}

// Allen 继承了 type 命令定义的 Person 对象，并且新增了一个 height 属性

注：

如果type命令定义的类型不是对象，interface 就无法继承。

3.3、interface 继承 class

TIP

interface 还可以继承 class，即继承该类的所有成员。（后边会详细讲解 class）

class A {
  x: string = "";

  y(): boolean {
    return true;
  }
}

interface B extends A {
  z: number;
}

// B 继承了 A，因此 B 就具有属性 x、y() 和 z

实现B接口的对象就需要实现这些属性。

const b: B = {
  x: "",
  y: function () {
    return true;
  },
  z: 123,
};

// 对象 b 就实现了接口 B，而接口 B 又继承了 类 A

某些类拥有私有成员和保护成员，interface 可以继承这样的类，但是意义不大。

class A {
  private x: string = "";
  protected y: string = "";
}

interface B extends A {
  z: number;
}

// 报错
const b: B = {
  /* ... */
};

// 报错
class C implements B {
  // ...
}

// A 有私有成员 和 保护成员，B 继承了 A，但无法用于对象，因为对象不能实现这些成员
// 这导致 B 只能用于其他 class，而这时其他 class 与 A 之间不构成父类 和 子类的关系，使得 x 与 y 无法部署

4、接口合并

TIP

多个同名接口会合并成一个接口。

interface Box {
  height: number;
  width: number;
}

interface Box {
  length: number;
}

// 两个 Box 接口会合并成一个接口，同时有 height、width 和 length 三个属性

注：

这样的设计主要是为了兼容 JavaScript 的行为。JavaScript 开发者常常对全局对象或者外部库，添加自己的属性和方法。

那么，只要使用 interface 给出这些自定义属性和方法的类型，就能自动跟原始的 interface 合并，使得扩展外部类型非常方便。

4.1、接口合并 - 注意事项

TIP

Web 网页开发经常会对windows对象和document对象添加自定义属性，但是 TypeScript 会报错，因为原始定义没有这些属性。

解决方法就是把自定义属性写成 interface，合并进原始定义。

interface Document {
  foo: string;
}

document.foo = "icoding";

// 接口 Document 增加了一个自定义属性 foo，从而就可以在 document 对象上使用自定义属性

同名接口合并时，同一个属性如果有多个类型声明，彼此不能有类型冲突。

interface A {
  a: number;
}

interface A {
  a: string; // 报错
}

// 接口 A 的属性 a 有两个类型声明，彼此是冲突的，导致报错

同名接口合并时，如果同名方法有不同的类型声明，那么会发生函数重载。而且，后面的定义比前面的定义具有更高的优先级。

interface Cloner {
  clone(animal: Animal): Animal;
}

interface Cloner {
  clone(animal: Sheep): Sheep;
}

interface Cloner {
  clone(animal: Dog): Dog;
  clone(animal: Cat): Cat;
}

// 等同于
interface Cloner {
  clone(animal: Dog): Dog;
  clone(animal: Cat): Cat;
  clone(animal: Sheep): Sheep;
  clone(animal: Animal): Animal;
}

// clone() 方法有不同的类型声明，会发生函数重载。这时，越靠后的定义，优先级越高，排在函数重载的越前面
// 比如，clone(animal: Animal) 是最先出现的类型声明，就排在函数重载的最后，属于clone() 函数最后匹配的类型。

这个规则有一个例外。同名方法之中，如果有一个参数是字面量类型，字面量类型有更高的优先级。

interface A {
  f(x: "foo"): boolean;
}

interface A {
  f(x: any): void;
}

// 等同于
interface A {
  f(x: "foo"): boolean;
  f(x: any): void;
}

// f() 方法有一个类型声明的参数x是字面量类型，这个类型声明的优先级最高，会排在函数重载的最前面

4.2、接口合并实践应用

TIP

以下应用是 Document 对象的createElement()方法，它会根据参数的不同，而生成不同的 HTML 节点对象

interface Document {
  createElement(tagName: any): Element;
}
interface Document {
  createElement(tagName: "div"): HTMLDivElement;
  createElement(tagName: "span"): HTMLSpanElement;
}
interface Document {
  createElement(tagName: string): HTMLElement;
  createElement(tagName: "canvas"): HTMLCanvasElement;
}

// 等同于
interface Document {
  createElement(tagName: "canvas"): HTMLCanvasElement;
  createElement(tagName: "div"): HTMLDivElement;
  createElement(tagName: "span"): HTMLSpanElement;
  createElement(tagName: string): HTMLElement;
  createElement(tagName: any): Element;
}

// createElement() 方法的函数重载，参数为字面量的类型声明会排到最前面，返回具体的 HTML 节点对象
// 类型越不具体的参数，排在越后面，返回通用的 HTML 节点对象

如果两个 interface 组成的联合类型存在同名属性，那么该属性的类型也是联合类型。

// 圆
interface Circle {
  area: bigint;
}

// 长方形
interface Rectangle {
  area: number;
}

declare const s: Circle | Rectangle;

s.area; // bigint | number

// 接口 Circle 和 Rectangle 组成一个联合类型 Circle | Rectangle
// 因此，这个联合类型的同名属性 area，也是一个联合类型
// declare命令表示 变量 s 的具体定义，由其他脚本文件给出，在 declare 命令 的部分会学习

5、interface 与 type 的异同

TIP

interface命令与type命令作用类似，都可以表示对象类型。

很多对象类型既可以用 interface 表示，也可以用 type 表示。而且，两者往往可以换用，几乎所有的 interface 命令都可以改写为 type 命令。

5.1、相似之处

TIP

它们的相似之处，首先表现在都能为对象类型起名。

type User = {
  username: string;
  age: number;
};

interface Users {
  username: string;
  age: number;
}

// type 命令 和 interface 命令，分别定义同一个类型

注：

class命令也有类似作用，通过定义一个类，同时定义一个对象类型。

但是，它会创造一个值，编译后依然存在。如果只是单纯想要一个类型，应该使用type或interface。

5.2、interface 与 type 的区别

TIP

• ①、type能够表示非对象类型，而interface只能表示对象类型（包括数组、函数等）
• ②、interface可以继承其他类型，type不支持继承。

继承的主要作用是添加属性，type定义的对象类型如果想要添加属性，只能使用&运算符，重新定义一个类型。

type Animal = {
  name: string;
};

type Dog = Animal & {
  age: number;
};

// 类型 Dog 在 Animal 的基础上添加了一个属性 age
// 上面的 &运算符，表示同时具备两个类型的特征，因此可以起到两个对象类型合并的作用。

作为比较，interface添加属性，采用的是继承的写法。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  age: number;
}

继承时，type 和 interface 是可以换用的。interface 可以继承 type。

type Foo = { x: number };

interface Bar extends Foo {
  y: number;
}

type 也可以继承 interface。

interface Foo {
  x: number;
}

type Bar = Foo & { y: number };

• ③、同名interface会自动合并，同名type则会报错。也就是说，TypeScript 不允许使用type多次定义同一个类型

type A = { foo: number }; // 报错
type A = { bar: number }; // 报错

// type 两次定义了类型A，导致两行都会报错

作为比较，interface则会自动合并

interface A {
  foo: number;
}
interface A {
  bar: number;
}

const obj: A = {
  foo: 1,
  bar: 1,
};

// interface 把类型 A 的两个定义合并在一起

这表明，interface 是开放的，可以添加属性，type 是封闭的，不能添加属性，只能定义新的 type

• ④、interface不能包含属性映射（mapping），type可以

interface Point {
  x: number;
  y: number;
}

// 正确
type PointCopy1 = {
  [Key in keyof Point]: Point[Key];
};

// 报错
interface PointCopy2 {
  [Key in keyof Point]: Point[Key];
};

• ⑤、this关键字只能用于interface

// 正确
interface Foo {
  add(num: number): this;
}

// 报错
type Foo = {
  add(num: number): this;
};

// type 命令声明的方法 add()，返回 this 就报错了
// 而 interface 命令没有这个问题

下面是返回this的实际对象的例子

class Count implements Foo {
  result = 0;
  add(num: number) {
    this.result += num;
    return this;
  }
}

• ⑥、type 可以扩展原始数据类型，interface 不行

// 正确
type MyStr = string & {
  type: "new";
};

// 报错
interface MyStr extends string {
  type: "new";
}

// type 可以扩展原始数据类型 string，interface 就不行

• ⑦、interface无法表达某些复杂类型（比如交叉类型和联合类型），但是type可以

type A = {
  /* ... */
};
type B = {
  /* ... */
};

type AorB = A | B;
type AorBwithName = AorB & {
  name: string;
};

// 类型 AorB 是一个联合类型，AorBwithName 则是为 AorB 添加一个属性
// 这两种运算，interface 都没法表达

注：

综上所述，如果有复杂的类型运算，那么没有其他选择只能使用type；一般情况下，interface灵活性比较高，便于扩充类型或自动合并，建议优先使用。

6、对象类型接口

TIP

需求：从后端获取一组数据，然后将数据渲染到页面中，我们应该如何定义接口 ？

// 使用 interface 定义一个 List 接口，该接口包括三个成员
interface List {
  id: number;
  username: string;
  age: number;
}
// 使用 interface 定义一个 Result 接口，有一个成员是 data，成员的取值是 List[] 数组
interface Result {
  data: List[];
}

// 渲染函数
function render(result: Result) {
  // 遍历 result.data
  result.data.forEach((value) => {
    // 打印对应的值
    console.log(value.id, value.username, value.age);
  });
}

// 假设：result 为后端接收过来的数据，同时 result 完全符合接口的定义
let result = {
  data: [
    { id: 1, username: "icoding", age: 18 },
    { id: 2, username: "艾编程", age: 19 },
  ],
};

// 调用 render() 函数，同时将后端的数据 result 作为参数传入其中
render(result);

注：

以上代码运行后，输出的结果符合我们的预期。

但实际开发过程中，一定会遇到后端往往会传入过来一些预定之外的字段。

如下

7、TS 的鸭式辨型法

interface List {
  id: number;
  username: string;
  age: number;
}
interface Result {
  data: List[];
}

function render(result: Result) {
  result.data.forEach((value) => {
    console.log(value.id, value.username, value.age);
  });
}

let result = {
  data: [
    // 后端传入预定之外的字段，sex: 'male'
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19 },
  ],
};

render(result);

注：

当后端传入了预定之外的字段 sex: 'male' ，发现在 TS 中并没有报错，它是允许这种情况发生的。

这是因为 TS 采用了一种 “鸭式辨型法” 这是一种动态语言风格，有一种形象的说法是：“一只鸟，看起来像鸭子，游起来像鸭子，叫起来像鸭子，那么这只鸟就可以被认为是鸭子”。

在 TS 中，我们只要传入的对象满足接口的必要条件，那就是被允许的，即便传入多余的字段也可以通过类型检查。

7.1、鸭式辨型法特殊情况

TIP

如果直接传入对象字面量，TS 就会对额外的字段进行类型检查

render({
  data: [
    // 此时，TS 会对额外的字段进行类型检查，sex: 'male' 处，会报错
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19 },
  ],
});

注：

以上代码，我们在 render() 方法中传入了对象字面量，其中有额外的字段，此时 TS 就会对额外的字段 sex: 'male' 进行类型检查。

绕过这种检查的方法有三种：

• ①、将对象字面量赋值给一个变量（像上边 result 变量的做法）
• ②、使用类型断言，在对象字面量后边加上 as 对象的类型 。类型断言的含义是：我们要明确的告诉编译器，对象的类型是什么 ，这样编译器就会绕过类型检查

render({
  data: [
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19 },
  ],
} as Result);

// 通过 as Result 类型断言

类型断言的另一种语法

// 直接在对象前加上 <对象类型>
render(<Result>{
  data: [
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19 },
  ],
});

注：两种方法是等价的，但此方式不建议使用，在 React 框架中会产生歧义，建议还是使用 as 对象类型 的方式

• ③、使用字符串索引签名

interface List {
  id: number;
  username: string;
  age: number;
  // 定义字符串索引签名
  [x: string]: any;
}

注：

[x: string]: any; 在 [] 中定义一个 x ，它的返回值类型是 any 这就是一个字符串索引签名。

它的含义是：用任意的字符串去索引 List 可以得到任意的结果，这样 List 就可以支持多个属性了。

8、接口成员 - 可选属性

TIP

需求：判断 value 中是否有新的字段，如果有就打印出来

可选属性语法：在属性前添加一个 ? 问号，表示该属性可有可无

interface List {
  id: number;
  username: string;
  age: number;
  // [x: string]: any; // 定义字符串索引签名
  // sex: string; // 添加 sex 属性后，调用 render(result) 方法还是会报错

  // 设置可选属性，在 sex 后边添加一个 ？ 表示该属性可有可无
  sex?: string;
}
interface Result {
  data: List[];
}

function render(result: Result) {
  result.data.forEach((value) => {
    console.log(value.id, value.username, value.age);
    // 判断 value 中是否有新的字段，如果有就打印出来
    if (value.sex) {
      console.log(value.sex);
    }
  });
}

let result = {
  data: [
    // 后端传入预定之外的字段，sex: 'male'
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19, sex: "female" },
  ],
};

render(result);

9、接口成员 - 只读属性

TIP

只读属性：给一个属性添加 readonly ，一般 id 都是只读的，并且只读属性都是不能修改的。

interface List {
  // 将 id 设置为 只读属性
  readonly id: number;
  username: string;
  age: number;
  // 设置可选属性，在 sex 后边添加一个 ？ 表示该属性可有可无
  sex?: string;
}
interface Result {
  data: List[];
}

function render(result: Result) {
  result.data.forEach((value) => {
    console.log(value.id, value.username, value.age);
    // 判断 value 中是否有新的字段，如果有就打印出来
    if (value.sex) {
      console.log(value.sex);
    }
    // 只读属性是不能修改的
    value.id++;
  });
}

let result = {
  data: [
    // 后端传入预定之外的字段，sex: 'male'
    { id: 1, username: "icoding", age: 18, sex: "male" },
    { id: 2, username: "艾编程", age: 19, sex: "female" },
  ],
};

render(result);

10、可索引类型的接口 - 数字索引

TIP

以上接口的属性个数都是固定的，当我们不确定一个接口中有多少个属性时，就可以使用可索引类型的接口。

可索引类型的接口可使用数字索引，也可用字符串来索引。

// 定义一个用数字索引的接口
interface StringArray {
  // 定义数字索引签名
  [index: number]: string;
}

// 这样的含义是：用任意的数字去索引 StringArray，都会得到一个 string
// 相当于声明了一个字符串类型的数组

// 定义一个变量 chars ，它的类型是 StringArray，取值为一个字符串数组
let chars: StringArray = ["A", "B"];

11、可索引类型的接口 - 字符串索引

// 定义一个字符串索引的接口
interface Names {
  // 字符串索引签名，这样声明后就不能再声明 number 类型的成员了
  [x: string]: string;
  // y: number // 会报错，因为两种索引签名是可以混用的

  // 新增一个数字签名索引
  [z: number]: string;

  // 这样即可以用数字索引 Names，也可以用 String 去索引 Names
  // 需要注意：数字签名的返回值，一定要是字符串索引签名值的子类类型
  // 这是因为 JavaScript 会进行类型转换，将 Number 转换为 String，这样就能保持类型的兼容性
}

如果将数字签名的返回值改为 number，这样就会和 string 不兼容

// 定义一个字符串索引的接口
interface Names {
  // [x: string]: string;
  [x: string]: any; // 改为 any 就兼容了

  // 将数字签名索引的返回值 改为 number，这样就会和 string 不兼容
  [z: number]: number;
}

12、总结

TIP

以上学习了对象类型接口，可以将过去我们开发过的 API 或 调用过的 API ，用接口去描述一下。

在这个过程中，会强制我们去思考一些变量的类型，也会思考一些接口的边界问题。这个过程非常有利于你培养类型思维。

13、函数类型接口

TIP

在数据类型中学过，使用变量来定义一个函数类型。如下

let add: (x: number, y: number) => number;

使用接口来定义一个函数，该接口的定义方式 等价于 以上函数

interface Add {
  (x: number, y: number): number;
}

除此之外，还有一种更简洁的函数定义方式，即：使用类型别名

// 使用类型别名定义函数
// type 为关键字，Add 为类型别名的名称，=> 后边的 number 为函数返回值类型
type Add = (x: number, y: number) => number;

注：类型别名就是我们这个函数取一个名字，该名字为 Add

实现一个具体的函数 add

let add: Add = (a, b) => a + b;

14、混合类型接口

TIP

一个接口既可以定义一个函数，也可以像对象一样拥有属性和方法，即：混合类型接口

使用混合接口定义一个类库

// 使用混合接口定义一个类库
interface Lib {
  // 无返回值、无参数的函数
  (): void;
  // 版本号
  version: string;
  // 函数的方法
  doSomething(): void;
}

// 实现接口
let lib: Lib = (() => {}) as Lib; // 使用类型断言，明确函数的类型
lib.version = "1.0";
lib.doSomething = () => {};

注：

以上的接口已经实现了，但它的问题就是对全局暴露了一个 lib，它是一个单例

如果需要创建多个 lib 就需要使用函数进行封装

// 使用混合接口定义一个类库
interface Lib {
  // 无返回值、无参数的函数
  (): void;
  // 版本号
  version: string;
  // 函数的方法
  doSomething(): void;
}

// 封装 getLib() 函数
function getLib() {
  let lib: Lib = (() => {}) as Lib;
  lib.version = "1.0";
  lib.doSomething = () => {};
  return lib;
}

// 有了封装好的 getLib() 函数，就可以创建多个实例了
// 创建一个 lib1 实例
let lib1 = getLib();
// 调用方法
lib1.doSomething();

// 创建一个 lib2 实例
let lib2 = getLib();
// 调用方法
lib2.doSomething();

总结：

以上我们用接口分别定义了对象和函数，其实接口还可以定义类的结构和类型，这部分内容会在学习完 TS 的类之后在做学习。