typescript中Triple-Slash Directives如何使用

在 TypeScript 中，Triple-Slash Directives（三斜线指令）是包含 XML 标签的单行注释，用于在编译过程中提供指令。它们必须放在文件的最顶部，前面只能有注释或其他三斜线指令。

主要的三斜线指令

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

用于声明对某个类型的依赖。

/// <reference types="node" />
/// <reference types="react" />

import * as fs from 'fs'; // 现在可以使用 node 的类型
import * as React from 'react';

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

用于声明对另一个文件的依赖。

/// <reference path="types.d.ts" />
/// <reference path="../utils/helpers.ts" />

const user: User = { name: "John" }; // User 类型在 types.d.ts 中定义

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

显式包含内置的库文件。

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

// 现在可以使用 ES2015 和 DOM 的 API
const promise = Promise.resolve();
document.getElementById("app");

现代替代方案

虽然三斜线指令仍然有效，但在很多情况下有更好的替代方案：

使用 import 代替 /// <reference>

// 旧的写法
/// <reference types="jquery" />

// 现代写法
import * as $ from 'jquery';

在 tsconfig.json 中配置

{
  "compilerOptions": {
    "types": ["node", "react"],
    "lib": ["es2015", "dom"]
  }
}