Visual Studio 立即提供功能強大的 JavaScript 編輯體驗。 由 TypeScript 型語言服務驅動,Visual Studio 提供豐富的 IntelliSense 支援,新式 JavaScript 功能,以及生產力功能如移至定義、重構等。
如需 Visual Studio 一般 IntelliSense 功能的詳細資訊,請參閱 使用 IntelliSense。
JavaScript IntelliSense 會顯示參數和成員清單的相關信息。 這項資訊是由 TypeScript 語言服務所提供,它會在幕後使用靜態分析來進一步瞭解您的程式代碼。
TypeScript 會使用數個來源來建置這項資訊:
- 基於類型推斷的 IntelliSense
- 以 JSDoc 為基礎的 IntelliSense
- 基於 TypeScript 宣告檔案的 IntelliSense
- 自動取得類型定義
以類型推斷為基礎的 IntelliSense
在 JavaScript 中,大部分時間都沒有明確的類型資訊可供使用。 幸運的是,根據周圍的程式代碼內容,通常很容易找出類型。 此程式稱為類型推斷。
對於變數或屬性,類型通常是用來初始化它或最近值指派的值類型。
var nextItem = 10;
nextItem; // here we know nextItem is a number
nextItem = "box";
nextItem; // now we know nextItem is a string
對於函式,可以從 return 語句推斷傳回型別。
對於函式參數,目前沒有推斷,但有一些方法可以使用 JSDoc 或 TypeScript .d.ts 檔案來解決此問題(請參閱稍後章節)。
此外,有下列特殊推斷:
- “ES3-style” 類別,透過建構函式定義,並將值賦給原型屬性。
- CommonJS 樣式模組模式,可以指定為在
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 是以相同的語言服務為基礎,因此能夠以豐富的方式互動。 例如,JavaScript IntelliSense 可以提供給在 .d.ts 檔案中宣告的值(請參閱 TypeScript 檔),而且 TypeScript 中宣告的介面和類別等類型可用來作為 JSDoc 批注中的類型。
以下顯示 TypeScript 定義檔的簡單範例,提供這類類型資訊(透過介面)至相同專案中的 JavaScript 檔案(使用 JSDoc
標記)。
自動取得類型定義
在 TypeScript 世界中,大多數受歡迎的 JavaScript 函式庫的 API 是由 .d.ts 檔案描述的,而最常見的這類定義的存放庫是 DefinitelyTyped。
根據預設,語言服務會嘗試偵測使用中的 JavaScript 連結庫,然後自動下載並參考描述連結庫的對應 .d.ts 檔案,以提供更豐富的 IntelliSense。 這些檔案會下載至位於使用者資料夾下的快取,位於 %LOCALAPPDATA%\Microsoft\TypeScript。
注意
如果您使用 tsconfig.json 組態檔,此功能預設會 停用,但可能會設定為啟用,如下所述。
目前,自動偵測適用於從 npm 下載的相依性(藉由讀取 package.json 檔案)、Bower (藉由讀取 bower.json 檔案),以及符合最熱門 JavaScript 連結庫前 400 個列表的鬆散檔案。 例如,如果您的專案中有 jquery-1.10.min.js,則會擷取和載入檔案 jquery.d.ts,以提供更佳的編輯體驗。 此 .d.ts 檔案不會影響您的專案。