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 definition file

自動擷取型別定義

在 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 檔案對您的專案沒有任何影響。

相關內容