TypeScript - 三斜线指令



三斜线指令类似于包含单个 XML 标签的单行注释。它们用于向 TypeScript 编译器提供有关处理 TypeScript 文件的指令。三斜线指令以三个正斜杠 (///) 开头,主要放置在代码文件顶部。

三斜线指令主要用于 TypeScript。但是,它们也可以用于使用 TypeScript 的 JavaScript 项目。

在 TypeScript 中,您可以将三斜线指令用于两种目的。

引用指令

引用指令主要用于告诉编译器在编译过程中包含另一个 TypeScript 文件。它们指定多个文件之间的依赖关系。此外,它们还用于声明依赖项包并在 TypeScript 文件中包含库。

语法

/// <reference path="file_path" />

在上面的语法中,我们首先使用了三个正斜杠来定义三斜线指令。之后,我们使用了 XML 标签 <reference /> 并向其添加了 path 属性。 path 属性将文件路径作为值。

类似地,您也可以将其他 XML 标签与三个正斜杠一起使用。

三斜线引用指令类型

以下是 JavaScript/TypeScript 环境中最常用的三斜线引用指令

  • ///<reference path="..." /> − 用于在一个文件中添加另一个 TypeScript 文件的引用。

  • ///<reference types="..." /> − 用于声明对包的依赖关系。

  • ///<reference lib="..." /> − 用于包含编译上下文的一部分的库文件。

示例:引用文件路径

三斜线指令的主要目的是在特定的 TypeScript 文件中引用其他文件。

文件名:MathFunctions.ts

在下面的代码中,我们定义了 add() 函数,它将两个数字作为参数并返回它们的和。我们还使用 export 关键字导出该函数以便在不同的文件中使用它。

// This file will be referenced in app.ts
export function add(a: number, b: number): number {
 return a + b;
}

文件名:app.ts

在此文件中,我们从 mathFunctions 文件导入了 add() 函数。我们还在此文件中使用了引用指令以告诉编译器文件路径。

/// <reference path="mathFunctions.ts" />
import { add } from './mathFunctions';
console.log('Addition of 10 and 20 is:', add(10, 20));

输出

Addition of 10 and 20 is 30

示例:引用类型定义

三斜线指令也可用于为外部模块指定引用类型定义。您可以使用 <reference type="module_type" /> 指令指定模块的类型。

App.ts

在下面的代码中,我们导入了“fs”模块。在此之前,我们使用了三斜线指令来指定模块的类型。

接下来,我们使用了“fs”模块的 readFileSync() 方法来读取文件内容。

/// <reference types="node" />
import * as fs from 'fs';
const content = fs.readFileSync('sample.txt', 'utf8');
console.log('File content:', content);

Sample.txt

以下文件包含纯文本。

Hello, this is a sample text file.

输出

File content: Hello, this is a sample text file.

示例:包含库

当您想在 TypeScript 编译期间使用特定库时,可以使用 ///<reference lib="lib_name" /> 三斜线指令来指定它。

在下面的代码中,我们使用了三斜线指令来指定“es2015.array”库。

/// <reference lib="es2015.array" /> 
const str = ["Hello", "1", "World", "2"];
const includesTwo = str.includes("2");
console.log(includesTwo); 

输出

true

模块系统指令

模块系统指令用于指定如何在 TypeScript 文件中加载模块。它们用于异步加载模块。

TypeScript 中有两种类型的模块系统指令

  • ///<amd-module name="..." />:用于指定要加载的模块名称。
  • ///<amd-dependency path="..." />:用于指定 AMD 模块依赖项的路径。

示例

在下面的代码中,我们使用了 AMD-module 三斜线指令,该指令指定异步加载“MyModule”模块。

/// <amd-module name="MyModule" />
export function displayMessage() {
 return "Hello from MyModule";
}

三斜线指令允许开发人员通过提供高级编译选项、模块加载以及与各种类型和库的集成来增强 JavaScript 项目。

广告