类型擦除一定要懂

背景#

TypeScript 作为 JavaScript 的超集语言，在编译时提供了强大的类型检查能力。但是，当 TypeScript 代码编译为 JavaScript 后，所有的类型信息都会消失——这就是”类型擦除”。理解类型擦除的机制对于正确编写 TypeScript 代码至关重要。

什么是类型擦除#

类型擦除（Type Erasure）是 TypeScript 编译过程中的核心特性。简单来说，TypeScript 的类型系统只存在于编译时，当代码编译为 JavaScript 后，所有的类型注解、接口定义、类型别名等都会被完全移除。

基础示例：

1
// TypeScript 源码
2
interface User {
3
  name: string;
4
  age: number;
5
}
6

7
const user: User = {
8
  name: "L1ngg",
9
  age: 20,
10
};
11

12
function greet(user: User): string {
13
  return `Hello, ${user.name}!`;
14
}

编译后的 JavaScript：

1
// 所有类型信息都消失了
2
const user = {
3
  name: "L1ngg",
4
  age: 20,
5
};
6

7
function greet(user) {
8
  return `Hello, ${user.name}!`;
9
}

类型擦除的工作原理#

理解哪些内容会被擦除、哪些会保留，对于编写正确的代码至关重要。

会被完全擦除的内容#

1. 接口（Interface）

1
// TS 源码
2
interface User {
3
  name: string;
4
  age: number;
5
}
6
const user: User = { name: "L1ngg", age: 20 };
7

8
// 编译后的 JS - interface 完全消失
9
const user = { name: "L1ngg", age: 20 };

2. 类型别名（Type Alias）

1
// TS 源码
2
type ID = string | number;
3
const userId: ID = "123";
4

5
// 编译后的 JS - type 完全消失
6
const userId = "123";

3. 泛型参数（Generics）

1
// TS 源码
2
function getFirst<T>(arr: T[]): T {
3
  return arr[0];
4
}
5

6
// 编译后的 JS - 泛型参数 T 完全消失
7
function getFirst(arr) {
8
  return arr[0];
9
}

4. 类型注解（Type Annotations）

1
// TS 源码
2
const name: string = "L1ngg";
3
const age: number = 20;
4

5
// 编译后的 JS - 类型注解完全消失
6
const name = "L1ngg";
7
const age = 20;

不会被擦除的内容#

1. 类（Class）

类是 TypeScript 中既是类型也是值的特殊存在。类的定义会保留在编译后的 JavaScript 中。

1
// TS 源码
2
class User {
3
  constructor(
4
    public name: string,
5
    public age: number,
6
  ) {}
7

8
  greet(): string {
9
    return `Hello, I'm ${this.name}`;
10
  }
11
}
12

13
// 编译后的 JS - 类会保留（转换为 ES5 或保持 ES6 语法）
14
class User {
15
  constructor(name, age) {
16
    this.name = name;
17
    this.age = age;
18
  }
19

20
  greet() {
21
    return `Hello, I'm ${this.name}`;
22
  }
23
}

2. 枚举（Enum）- 特殊情况

枚举的处理比较特殊，普通枚举会保留，但 const 枚举会被擦除。

1
// 普通枚举 - 会保留在 JS 中
2
enum Status {
3
  Active = "ACTIVE",
4
  Inactive = "INACTIVE",
5
}
6

7
// 编译后的 JS - 枚举会转换为对象
8
var Status;
9
(function (Status) {
10
  Status["Active"] = "ACTIVE";
11
  Status["Inactive"] = "INACTIVE";
12
})(Status || (Status = {}));
13

14
// const 枚举 - 会被完全擦除
15
const enum Color {
16
  Red = "#FF0000",
17
  Blue = "#0000FF",
18
}
19
const myColor = Color.Red;
20

21
// 编译后的 JS - const enum 被内联，枚举定义消失
22
const myColor = "#FF0000";

类型擦除的实际影响#

理解类型擦除很重要，因为它直接影响代码的运行时行为。

1. 不能在运行时检查接口或类型别名#

由于接口和类型别名在编译后完全消失，无法使用 instanceof 或 typeof 来检查它们。

1
interface User {
2
  name: string;
3
  age: number;
4
}
5

6
const obj = { name: "L1ngg", age: 20 };
7

8
// ❌ 错误：接口在运行时不存在
9
if (obj instanceof User) {
10
  console.log("Is a User");
11
}
12

13
// ✅ 正确：使用类型守卫函数
14
function isUser(obj: any): obj is User {
15
  return (
16
    typeof obj === "object" &&
17
    obj !== null &&
18
    typeof obj.name === "string" &&
19
    typeof obj.age === "number"
20
  );
21
}
22

23
if (isUser(obj)) {
24
  console.log("Is a User");
25
}

2. 类可以在运行时使用#

因为类会保留在 JavaScript 中，所以可以用于运行时检查。

1
class Admin {
2
  role = "admin";
3
  constructor(public name: string) {}
4
}
5

6
const user = new Admin("L1ngg");
7

8
// ✅ 正确：类在运行时存在
9
if (user instanceof Admin) {
10
  console.log("Is an Admin");
11
}

3. 泛型信息在运行时不可用#

泛型参数在编译后会被擦除，无法在运行时获取泛型的具体类型。

1
function processArray<T>(arr: T[]): void {
2
  // ❌ 无法在运行时知道 T 的具体类型
3
  // typeof T 是不可能的
4
  console.log(arr);
5
}
6

7
// 如果需要运行时类型信息，需要显式传递
8
function processArrayWithType<T>(arr: T[], type: new () => T): void {
9
  console.log(`Processing array of ${type.name}`);
10
}

import type 与类型擦除#

理解类型擦除后，我们可以更好地利用 import type 来优化代码。

为什么需要 import type#

当我们只需要导入类型信息（用于类型标注），而不需要运行时的值时，使用 import type 可以明确告诉编译器和打包工具：这个导入会被完全擦除。

1
export interface UserProfile {
2
  id: string;
3
  name: string;
4
}
5

6
export const API_URL = "https://api.example.com";
7

8
// user.ts
9
import type { UserProfile } from "./types"; // 只导入类型
10
import { API_URL } from "./types"; // 导入值
11

12
const user: UserProfile = {
13
  id: "1",
14
  name: "L1ngg",
15
};
16

17
fetch(`${API_URL}/users`);

编译后：

1
import { API_URL } from "./types"; // UserProfile 的导入消失了
2

3
const user = {
4
  id: "1",
5
  name: "L1ngg",
6
};
7

8
fetch(`${API_URL}/users`);

import type 的好处#

打包优化：避免将仅用于类型标注的模块打包进最终代码，减小打包体积
明确意图：让其他开发者一眼看出这是纯类型导入
避免副作用：某些模块在导入时会执行代码，使用 import type 可以避免这些副作用
解决循环依赖：在某些循环依赖场景下，import type 可以打破循环引用

实际应用场景#

1. 使用类型守卫进行运行时检查#

由于类型信息会被擦除，我们需要使用类型守卫函数来进行运行时类型检查。

1
interface ApiResponse {
2
  success: boolean;
3
  data: any;
4
}
5

6
function isApiResponse(obj: any): obj is ApiResponse {
7
  return (
8
    typeof obj === "object" &&
9
    obj !== null &&
10
    typeof obj.success === "boolean" &&
11
    "data" in obj
12
  );
13
}
14

15
// 使用类型守卫
16
const response = await fetch("/api/data").then((r) => r.json());
17
if (isApiResponse(response)) {
18
  // TypeScript 知道这里 response 是 ApiResponse 类型
19
  console.log(response.data);
20
}

2. 使用类进行运行时类型检查#

当需要运行时类型检查时，考虑使用类而不是接口。

1
// 使用类而不是接口
2
class User {
3
  constructor(
4
    public name: string,
5
    public age: number,
6
  ) {}
7
}
8

9
const obj = new User("L1ngg", 20);
10

11
// ✅ 可以在运行时检查
12
if (obj instanceof User) {
13
  console.log("Is a User instance");
14
}

3. 优化打包体积#

使用 import type 可以避免不必要的模块被打包。

1
export interface Config {
2
  apiUrl: string;
3
}
4

5
export const DEFAULT_CONFIG: Config = {
6
  apiUrl: "https://api.example.com",
7
};
8

9
// app.ts
10
import type { Config } from "./types"; // 只导入类型，不会打包 DEFAULT_CONFIG
11

12
const myConfig: Config = {
13
  apiUrl: "https://my-api.com",
14
};

总结#

类型擦除是 TypeScript 的核心特性，理解它对于编写正确的 TypeScript 代码至关重要：

会被擦除：接口、类型别名、泛型参数、类型注解
不会被擦除：类、普通枚举（const 枚举会被擦除）
运行时检查：不能使用 instanceof 检查接口，需要使用类型守卫函数
最佳实践：使用 import type 来明确纯类型导入，优化打包体积

理解类型擦除可以帮助你：

避免运行时错误
编写更高效的代码
更好地利用 TypeScript 的类型系统

相关阅读：TypeScript 导入导出指南

L1ngg's Home

背景#