TypeScript 三斜杠 - TypeScript

TypeScript 三斜杠是一种特殊的注释语法，用于声明文件之间的依赖关系、引用模块、声明全局变量和提供指令给编译器等。

基本用法

TypeScript 三斜杠由三个斜杠组成，放在单行注释的开头。它支持以下几种形式：

/// <reference path="路径"/>

<reference path="路径"/> 用来声明当前 TypeScript 文件对其他文件的依赖关系，告诉编译器要先编译依赖文件。例如：

/// <reference path="jquery.d.ts"/>

$(function () { 
    $('body').html('Hello TypeScript!'); 
});

在这个例子中，我们使用了 jQuery 的类型定义文件 jquery.d.ts，通过 ///<reference path="jquery.d.ts"/> 指定依赖，可以在编译时让编译器将其一起编译，避免类型检查出错。

/// <reference types="包名"/>

<reference types="包名"/> 是 ///<reference path="路径"/> 的一个简化版，用于引入一些安装在 node_modules/@types 中的类型定义文件。例如：

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

ReactDOM.render(<h1>Hello React!</h1>, document.getElementById("app"));

这里我们引入了 react 包中的类型定义文件，可以在 TypeScript 代码中使用 React 相关的类型检查。

/// <reference no-default-lib="true"/>

如果 TypeScript 编译器默认会自动添加一些 JavaScript 常用的库文件（如 lib.d.ts），但是我们可以通过 <reference no-default-lib="true"/> 来禁用这个默认行为，自己手动添加需要的库文件。

/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />

这个例子中，我们禁用了默认的库文件，然后通过 <reference lib="esnext"/> 来手动添加 esnext 版本的库文件。

高级用法

除了基本用法，TypeScript 三斜杠还支持其他一些高级用法：

/// <amd-module name="模块名"/>

这个指令是用来指定模块的名称的，适用于生产 AMD 模块（异步模块定义）。例如：

/// <amd-module name="myModule"/>
define(["require", "exports", "jquery"], function (require, exports, $) {
    $('body').html('Hello TypeScript!');
});

这里我们通过 ///<amd-module name="myModule"/> 来指定当前模块的名称为 myModule。

/// <amd-dependency path="路径" name="模块名"/>

这个指令是用来指定当前模块对其他模块的依赖关系的，同样适用于 AMD 模块。例如：

/// <amd-dependency path="jquery" name="$"/>
define(["require", "exports", "$"], function (require, exports, $) {
    $('body').html('Hello TypeScript!');
});

这里我们通过 ///<amd-dependency path="jquery" name="$"/> 来指定当前模块依赖于 jQuery 模块，并且将其作为 $ 暴露给当前模块使用。

/// <triple-slash-reference types="类型名"/>

这个指令可以将某个类型定义文件中的类型引入到当前源文件中来使用，适用于声明文件模块化的情况。例如：

/// <triple-slash-reference types="jquery" />
import $ = require('jquery');

$('body').html('Hello TypeScript!');

这里我们通过 ///<triple-slash-reference types="jquery"/> 来引入 jQuery 的类型定义文件中的类型，然后通过 import $ = require('jquery') 来引入 jQuery 内容并把其赋值给 $ 以供使用。

总结

TypeScript 三斜杠是一种非常实用的注释语法，有了它，我们可以更方便地编写模块化、依赖管理等高级 TypeScript 程序。需要注意的是，它仅限于在 TypeScript 源文件中使用，不要在 JavaScript 源文件中使用。