TypeScript 中的三斜线指令：/// <reference>

更新: 1/12/2026字数: 0 字 时长: 0 分钟

• 1. 常见的三斜线指令
• 2. /// <reference path="..." />
• 3. /// <reference lib="..." />
• 4. /// <reference types="..." />
• 5. /// <amd-module name="..." />

三斜线指令（///）是 TypeScript 提供的用于注释中的特殊指令，它们用于指导 TypeScript 编译器如何解析和处理代码。这些指令通常出现在文件的最顶部，作用是对整个文件进行配置。三斜线指令的主要用途包括引用其他文件、启用特定的编译选项，或对类型进行配置。

三斜线指令的语法格式如下：

/// <directive> <value>

注意，三斜线指令只能出现在文件的开头，并且它们不需要被导入，它们是 TypeScript 的注释机制。

1. 常见的三斜线指令

TypeScript 中有几种常用的三斜线指令，包括：

1. /// <reference path="..." />
2. /// <reference lib="..." />
3. /// <reference types="..." />
4. /// <amd-module name="..." />

2. /// <reference path="..." />

<reference path="..." /> 是最常见的三斜线指令之一，用于引用其他 TypeScript 文件。它允许一个 TypeScript 文件通过指定文件路径来引用另一个 TypeScript 文件，从而让 TypeScript 知道其他文件中定义的类型和模块。

示例：

假设我们有两个文件：

• file1.ts，包含一个 Person 接口。
• file2.ts，我们需要在此文件中引用 file1.ts 中的接口。

file1.ts：

export interface Person {
  name: string;
  age: number;
}

file2.ts：

/// <reference path="file1.ts" />

let person: Person = { name: "Alice", age: 25 };
console.log(person);

在 file2.ts 文件中，我们通过 /// <reference path="file1.ts" /> 引用了 file1.ts，从而使 file2.ts 可以访问 file1.ts 中定义的 Person 接口。

注意： path 是相对路径或绝对路径，可以是相对当前文件的路径。

3. /// <reference lib="..." />

<reference lib="..." /> 用于引入 内置的 JavaScript 库类型，例如 DOM、ES6、ESNext 等。这使得 TypeScript 知道要包含哪些标准库的类型定义。这对于告诉 TypeScript 编译器你正在使用哪些库的类型非常有用。

示例：

/// <reference lib="dom" />

let button = document.querySelector("button");
button?.addEventListener("click", () => {
  console.log("Button clicked!");
});

这里，/// <reference lib="dom" /> 告诉 TypeScript 包含 DOM 的类型定义，这样就可以在代码中安全地访问 DOM 方法和属性。

你可以通过 lib 属性引入多种类型库：

• "dom"：包含 DOM 类型
• "es5"、"es6"、"esnext"：包含 ES5、ES6 或更高版本的 JavaScript 类型
• "webworker"、"scripthost" 等：用于特定环境下的库类型

4. /// <reference types="..." />

<reference types="..." /> 用于引入类型声明文件，通常是通过 @types 包安装的类型声明。例如，@types/node、@types/react 等。

示例：

假设你使用了第三方库，并且该库没有内置类型，你可以通过安装其类型定义（通常在 @types 组织中）来为 TypeScript 提供类型支持。

首先，安装类型定义：

npm install --save-dev @types/lodash

然后，在文件中通过 /// <reference types="..." /> 引入该类型定义：

/// <reference types="lodash" />

import { debounce } from "lodash";

const debouncedFunc = debounce(() => {
  console.log("This is debounced!");
}, 1000);
debouncedFunc();

在这个例子中，/// <reference types="lodash" /> 让 TypeScript 知道 lodash 的类型信息，使得我们可以安全地使用 lodash 库的 API。

5. /// <amd-module name="..." />

<amd-module name="..." /> 用于在使用 AMD 模块系统 时为模块指定名称。这通常用于将 TypeScript 文件转换为 AMD 模块时，给模块指定名称。

示例：

/// <amd-module name="MyModule" />

export class MyClass {
  greet() {
    console.log("Hello from MyClass");
  }
}

在这个例子中，/// <amd-module name="MyModule" /> 给模块指定了名称 MyModule。这在 AMD（Asynchronous Module Definition）模块系统中使用，帮助模块解析器识别该模块。