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

前言

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

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

三斜杠指令僅在其包含文件的頂部有效。 三重斜杠指令只能在單行或多行注釋之前，包括其他三重斜杠指令。 如果在聲明或聲明之后遇到它們，則將它們視為常規(guī)單行注釋?zhuān)⑶覜](méi)有特殊含義。

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

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

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

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

該過(guò)程從一組根文件開(kāi)始; 這些是在命令行或tsconfig.json文件的”files”列表中指定的文件名。 這些根文件按照指定的順序進(jìn)行預(yù)處理。 在將文件添加到列表之前，將處理其中的所有三重斜杠引用，并包括其目標(biāo)。 三重斜杠引用按照它們?cè)谖募锌吹降捻樞蛞陨疃葍?yōu)先方式解析。

如果無(wú)根則，則相對(duì)于包含文件解析三斜杠參考路徑。

錯(cuò)誤

引用不存在的文件是錯(cuò)誤的。 如果文件具有對(duì)自身的三斜杠引用，則會(huì)出錯(cuò)。

使用–noResolve

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

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

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

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

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

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

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

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

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

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

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

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

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

"foo".padStart(4);

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

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

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

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

/// <amd-module />

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

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

amdModule.ts

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

將導(dǎo)致將名稱(chēng)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模塊依賴(lài)項(xiàng)。

amd-dependency指令也可以有一個(gè)可選的name屬性; 這允許傳遞amd依賴(lài)的可選名稱(chēng)：

/// <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)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com