JavaScript IntelliSenseJavaScript IntelliSense

Visual Studio 2017Visual Studio 2017 では、すぐに使用できる強力な JavaScript 編集エクスペリエンスが提供されます。 provides a powerful JavaScript editing experience right out of the box. TypeScript ベースの言語サービスを活用して、Visual Studio で高度な IntelliSense が提供されます。また、最新の JavaScript 機能がサポートされ、定義へ移動、リファクタリングなどの生産性向上機能が改善されています。Powered by a TypeScript based language service, Visual Studio delivers richer IntelliSense, support for modern JavaScript features, and improved productivity features such as Go to Definition, refactoring, and more.

注意

Visual Studio 2017Visual Studio 2017 の JavaScript 言語サービスでは、言語サービス ("Salsa" と呼ばれる) の新しいエンジンが使用されます。The JavaScript language service in Visual Studio 2017Visual Studio 2017 uses a new engine for the language service (called "Salsa"). このトピックでも詳しく説明しますが、このブログ投稿も参照してください。Details are included in this topic, and you can also read this blog post. 新しい編集機能のほとんどは Visual Studio Code にも適用されます。The new editing experience also mostly applies to Visual Studio Code. 詳細については、VS コードのドキュメントを参照してください。See the VS Code docs for more info.

Visual Studio の一般的な IntelliSense の機能の詳細については、「IntelliSense の使用方法」を参照してください。For more information about the general IntelliSense functionality of Visual Studio, see Using IntelliSense.

Visual Studio 2017Visual Studio 2017 の JavaScript 言語サービスの新機能What's New in the JavaScript language service in Visual Studio 2017Visual Studio 2017

Visual Studio 2017Visual Studio 2017 以降の JavaScript IntelliSense では、パラメーターおよびメンバー リストにさらに多くの情報が表示されるようになっています。Starting in Visual Studio 2017Visual Studio 2017, JavaScript IntelliSense displays a lot more information on parameter and member lists. この新しい情報は TypeScript 言語サービスで提供されます。この言語サービスでは、コードをよりよく理解するためにバックグラウンドで静的分析が使用されます。This new information is provided by the TypeScript language service, which uses static analysis behind the scenes to better understand your code. TypeScript では、この情報を作成するためにいくつかのソースを使用します。TypeScript uses several sources to build up this information:

型推論に基づく IntelliSenseIntelliSense based on type inference

JavaScript では、ほとんどの場合、明示的な型情報を利用できません。In JavaScript, most of the time there is no explicit type information available. 幸い、周囲のコード コンテキストから型を推測するのは実に簡単です。Luckily, it is usually fairly easy to figure out a type given the surrounding code context. このプロセスを型推論と呼びます。This process is called type inference.

変数またはプロパティの場合、一般的に初期化の際に使用される値の型、または最新の割り当て値の型となります。For a variable or property, the type is typically the type of the value used to initialize it or the most recent value assignment.

var nextItem = 10;
nextItem; // here we know nextItem is a number

nextItem = "box";
nextItem; // now we know nextItem is a string

関数の場合、return ステートメントから戻り値を推測できます。For a function, the return type can be inferred from the return statements.

関数パラメーターの場合、現時点では推測されませんが、JSDoc または TypeScript の .d.ts ファイル (以降のセクションを参照) を使用してこれに対処する方法があります。For function parameters, there is currently no inference, but there are ways to work around this using JSDoc or TypeScript .d.ts files (see later sections).

さらに、次のような特殊な推論があります。Additionally, there is special inference for the following:

  • "ES3 形式" クラス。プロトタイプ プロパティへのコンストラクター関数と割り当てを使用して指定します。"ES3-style" classes, specified using a constructor function and assignments to the prototype property.
  • CommonJS 形式のモジュールパターン。exports オブジェクトでのプロパティ割り当て、または module.exports プロパティへの割り当てとして指定します。CommonJS-style module patterns, specified as property assignments on the exports object, or assignments to the module.exports property.
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 に基づく IntelliSenseIntelliSense based on JSDoc

型推論で必要な (またはドキュメントを補足するための) 型情報が提供されない場合、型情報は JSDoc 注釈で明示的に指定されることがあります。Where type inference does not provide the desired type information (or to support documentation), type information may be provided explicitly via JSDoc annotations. たとえば、部分的に宣言されたオブジェクトに特定の型を指定する場合、次のように @type タグを使用できます。For example, to give a partially declared object a specific type, you can use the @type tag as shown below:

/**
 * @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

前述のとおり、関数パラメーターが推測されることはありません。As mentioned, function parameters are never inferred. ただし、JSDoc の @param タグを使用すれば、関数パラメーターにも型を追加することができます。However, using the JSDoc @param tag you can add types to function parameters as well.

/**
 * @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 注釈については、このドキュメントを参照してください。See this doc for the JsDoc annotations currently supported.

TypeScript 宣言ファイルに基づく IntelliSenseIntelliSense based on TypeScript Declaration Files

現在、JavaScript と TypeScript は同じ言語サービスに基づいているため、より多くの方法で対話することができます。Because JavaScript and TypeScript are now based on the same language service, they are able to interact in a richer way. たとえば、JavaScript IntelliSense は、.d.ts ファイルで宣言された値に提供することができ (詳細については、こちらを参照してください)、TypeScript で宣言されているインターフェイスやクラスなどの型は、JsDoc コメントの型として使用できます。For example, JavaScript IntelliSense can be provided for values declared in a .d.ts file (more info), and types such as interfaces and classes declared in TypeScript are available for use as types in JsDoc comments.

(インターフェイス経由で) このような型情報を、(JsDoc タグを使用して) 同じプロジェクトの JavaScript ファイルに提供する TypeScript 定義ファイルの簡単な例を以下に示します。Below, we show a simple example of a TypeScript definition file providing such type information (via an interface) to a JavaScript file in the same project (using a JsDoc tag).

型定義の自動取得Automatic acquisition of type definitions

TypeScript の世界では、最も一般的な JavaScript ライブラリに .d.ts ファイルで記述された API が含まれ、その定義で最も一般的なレポジトリは DefinitelyTyped にあります。In the TypeScript world, most popular JavaScript libraries have their APIs described by .d.ts files, and the most common repository for such definitions is on DefinitelyTyped.

既定では、Salsa 言語サービスは使用されている JavaScript ライブラリを検出し、高度な IntelliSense を提供するためにライブラリを記述する、対応する .d.ts ファイルを自動的にダウンロードして参照しようとします。By default, the Salsa language service will try to detect which JavaScript libraries are in use and automatically download and reference the corresponding .d.ts file that describes the library in order to provide richer IntelliSense. ファイルは、%LOCALAPPDATA%\Microsoft\TypeScript のユーザー フォルダーの下にあるキャッシュにダウンロードされます。The files are downloaded to a cache located under the user folder at %LOCALAPPDATA%\Microsoft\TypeScript.

注意

tsconfig.json 構成ファイルを使用する場合、この機能は既定で無効になりますが、有効に設定することができます (下記参照)。This feature is disabled by default if using a tsconfig.json configuration file, but may be set to enabled as outlined further below.

現在、自動検出は npm (package.json ファイルを読み取る場合)、Bower (bower.json ファイルを読み取る場合) からダウンロードされる依存関係に対して機能します。また、おおよそ上位 400 の最も一般的な JavaScript ライブラリのリストに一致する、プロジェクトのルーズ ファイルにも有効です。Currently auto-detection works for dependencies downloaded from npm (by reading the package.json file), Bower (by reading the bower.json file), and for loose files in your project that match a list of roughly the top 400 most popular JavaScript libraries. たとえば、プロジェクトに jquery-1.10.min.js がある場合、ファイル jquery.d.ts は、優れた編集エクスペリエンスを提供するためにフェッチされ、読み込まれます。For example, if you have jquery-1.10.min.js in your project, the file jquery.d.ts will be fetched and loaded in order to provide a better editing experience. この .d.ts ファイルはプロジェクトには影響しません。This .d.ts file will have no impact on your project.

自動取得を使用しない場合は、以下に示すとおり、構成ファイルを追加して無効にします。If you do not wish to use auto-acquisition, disable it by adding a configuration file as outlined below. プロジェクト内で直接使用する場合も定義ファイルを手動で配置できます。You can still place definition files for use directly within your project manually.

関連項目See also

IntelliSense の使用Using IntelliSense