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 專案。

列印頁面