TypeScript基礎(chǔ)入門教程之三重斜線指令詳解

前言

TypeScript是Javascript的超集，實現(xiàn)以面向?qū)ο缶幊痰姆绞绞褂肑avascript。當(dāng)然最后代碼還是編譯為Javascript。

三斜杠指令是包含單個XML標(biāo)記的單行注釋。 注釋的內(nèi)容用作編譯器指令。

三斜杠指令僅在其包含文件的頂部有效。 三重斜杠指令只能在單行或多行注釋之前，包括其他三重斜杠指令。 如果在聲明或聲明之后遇到它們，則將它們視為常規(guī)單行注釋，并且沒有特殊含義。

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

/// <reference path ="..."/>指令是該組中最常見的。 它充當(dāng)文件之間的依賴聲明。

三斜杠引用指示編譯器在編譯過程中包含其他文件。

它們還可以作為在使用–out或–outFile時對輸出進行排序的方法。 在預(yù)處理傳遞之后，文件以與輸入相同的順序發(fā)送到輸出文件位置。

該過程從一組根文件開始; 這些是在命令行或tsconfig.json文件的”files”列表中指定的文件名。 這些根文件按照指定的順序進行預(yù)處理。 在將文件添加到列表之前，將處理其中的所有三重斜杠引用，并包括其目標(biāo)。 三重斜杠引用按照它們在文件中看到的順序以深度優(yōu)先方式解析。

如果無根則，則相對于包含文件解析三斜杠參考路徑。

錯誤

引用不存在的文件是錯誤的。 如果文件具有對自身的三斜杠引用，則會出錯。

使用–noResolve

如果指定了編譯器標(biāo)志–noResolve，則忽略三次斜杠引用; 它們既不會導(dǎo)致添加新文件，也不會更改所提供文件的順序。

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

類似于/// <reference path ="..."/>指令，該指令用作依賴聲明; 但是， /// <references types ="..."/>指令聲明了對包的依賴性。

解析這些包名稱的過程類似于在import語句中解析模塊名稱的過程。 考慮三重斜杠引用類型指令的簡單方法是作為聲明包的導(dǎo)入。

例如，在聲明文件中包含/// <references types ="node"/>聲明此文件使用在types/node/index.d.ts中聲明的名稱; 因此，此包需要與聲明文件一起包含在編譯中。

只有在手動創(chuàng)建d.ts文件時才使用這些指令。

對于編譯期間生成的聲明文件，編譯器會自動為您添加/// <references types ="..."/>; 當(dāng)且僅當(dāng)生成的文件使用引用包中的任何聲明時，才會添加生成的聲明文件中的/// <reference types ="..."/> 。

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

該指令允許文件顯式包含現(xiàn)有的內(nèi)置lib文件。

內(nèi)置的lib文件以與tsconfig.json中的”lib”編譯器選項相同的方式引用（例如，使用lib=”es2015”而不是lib=”lib.es2015.d.ts”等）。

對于在內(nèi)置類型上進行中繼的聲明文件作者，例如 建議使用DOM API或內(nèi)置的JS運行時構(gòu)造函數(shù)（如Symbol或Iterable，三斜杠引用lib指令）。 以前這些.d.ts文件必須添加此類型的前向/重復(fù)聲明。

例如，將/// <reference lib="es2017.string"/>添加到編譯中的一個文件等效于使用–lib es2017.string進行編譯。

/// <reference lib="es2017.string" />

"foo".padStart(4);

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

該指令將文件標(biāo)記為默認(rèn)庫。 您將在lib.d.ts及其不同變體的頂部看到此注釋。

該指令指示編譯器不在編譯中包含默認(rèn)庫（即lib.d.ts）。 這里的影響類似于在命令行上傳遞–noLib。

另請注意，在傳遞–skipDefaultLibCheck時，編譯器將僅跳過使用/// <reference no-default-lib ="true"/>檢查文件。

/// <amd-module />

默認(rèn)情況下，AMD模塊是匿名生成的。 當(dāng)使用其他工具處理結(jié)果模塊（例如捆綁器（例如r.js））時，這會導(dǎo)致問題。

amd-module指令允許將可選模塊名稱傳遞給編譯器：

amdModule.ts

///<amd-module name="NamedModule"/>
export class C {
}

將導(dǎo)致將名稱NamedModule分配給模塊作為調(diào)用AMD定義的一部分：

amdModule.js

define("NamedModule", ["require", "exports"], function (require, exports) {
 var C = (function () {
 function C() {
 }
 return C;
 })();
 exports.C = C;
});

/// <amd-dependency />

注意：此指令已被棄用。使用import”moduleName”;而是聲明。

/// <amd-dependency path ="x"/>通知編譯器需要在結(jié)果模塊的require調(diào)用中注入的非TS模塊依賴項。

amd-dependency指令也可以有一個可選的name屬性; 這允許傳遞amd依賴的可選名稱：

/// <amd-dependency path="legacy/moduleA" name="moduleA"/>
declare var moduleA:MyType
moduleA.callStuff()

生成的JS代碼：

define(["require", "exports", "legacy/moduleA"], function (require, exports, moduleA) {
 moduleA.callStuff()
});

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com