JavaScript IntelliSense
Visual Studio 提供現成可用的強大 JavaScript 編輯體驗。 由 TypeScript 型語言服務提供,Visual Studio 提供了更豐富的 IntelliSense、新式 JavaScript 功能支援,以及 [移至定義]、[重構] 等生產力功能。
如需一般 Visual Studio IntelliSense 功能的詳細資訊,請參閱使用 IntelliSense。
JavaScript IntelliSense 會顯示參數和成員清單的資訊。 此項資訊由 TypeScript 語言服務提供,它會在幕後使用靜態分析來進一步了解您的程式碼。
TypeScript 使用數個來源建立這項資訊:
以型別推斷為基礎的 IntelliSense
在 JavaScript 中,大部分的時間不提供任何明確的類型資訊。 幸運的是,只要根據周圍的程式碼內容,通常就能很容易找出型別。 此程序稱為型別推斷。
變數或屬性的類型,通常是用來初始化值的類型或最新的值指派。
var nextItem = 10;
nextItem; // here we know nextItem is a number
nextItem = "box";
nextItem; // now we know nextItem is a string
函式的傳回型別則可從傳回的陳述式推斷。
函式參數目前沒有任何推斷,但使用 JSDoc 或 TypeScript .d.ts 檔案有多種方法可解決此問題 (請參閱稍後的章節)。
此外,還有下列項目的特殊推斷︰
- "ES3-style" 類別,使用建構函式和原型屬性指派所指定。
- CommonJS-style 模組模式,指定為
exports
物件的屬性指派或module.exports
屬性的指派。
function Foo(param1) {
this.prop = param1;
}
Foo.prototype.getIt = function () { return this.prop; };
// Foo will appear as a class, and instances will have a 'prop' property and a 'getIt' method.
exports.Foo = Foo;
// This file will appear as an external module with a 'Foo' export.
// Note that assigning a value to "module.exports" is also supported.
以 JSDoc 為基礎的 IntelliSense
如果型別推斷未提供所需的型別資訊 (或支援文件),可透過 JSDoc 註釋明確提供型別資訊。 例如,若要為部分宣告的物件提供特定的類型,您可以使用 @type
標記,如下所示︰
/**
* @type {{a: boolean, b: boolean, c: number}}
*/
var x = {a: true};
x.b = false;
x. // <- "x" is shown as having properties a, b, and c of the types specified
如前所述,永遠不會推斷函式參數。 不過,使用 JSDoc @param
標記也可以在函式參數中加入類型。
/**
* @param {string} param1 - The first argument to this function
*/
function Foo(param1) {
this.prop = param1; // "param1" (and thus "this.prop") are now of type "string".
}
如需目前支援的 JsDoc 註釋,請參閱類型檢查 JavaScript 檔案 (英文) 中的 JsDoc 資訊。
以 TypeScript 宣告檔案為基礎的 IntelliSense
由於 JavaScript 和 TypeScript 以相同的語言服務為基礎,因此能以豐富的方式互動。 例如,可為 .d.ts 檔案中宣告的值提供 JavaScript IntelliSense (請參閱 TypeScript 文件),而在 TypeScript 中宣告的介面和類別等類型,可提供 JsDoc 註解當作類型使用。
以下簡單示範 TypeScript 定義檔案 (透過介面) 向同一專案中的 JavaScript 檔案 (使用 JsDoc
標記) 提供此類的類型資訊。
自動擷取型別定義
在 TypeScript 世界中,最熱門的 JavaScript 程式庫都使用 .d.ts 檔案描述其 API,而這類定義最常見的存放庫位於 DefinitelyTyped。
根據預設,語言服務會嘗試偵測使用中的 JavaScript 程式庫,然後自動下載並參考用於描述程式庫的對應 .d.ts 檔案,以提供更豐富的 IntelliSense。 這些檔案會下載到位於 %LOCALAPPDATA%\Microsoft\TypeScript 的使用者資料夾下的快取。
注意
如果您正在使用 tsconfig.json 設定檔,這項功能會預設為 [停用],但可設為 [啟用],詳細資訊如下所述。
目前,自動偵測適用於從 npm (藉由讀取 package.json 檔案)、Bower (藉由讀取 bower.json 檔案) 下載的相依性,以及符合大約前 400 個最熱門 JavaScript 程式庫清單之專案中的鬆散檔案。 例如,如果您的專案中有 jquery-1.10.min.js,則會擷取並載入檔案 jquery.d.ts 以提供更好的編輯體驗。 此 .d.ts 檔案對您的專案沒有任何影響。