JavaScript IntelliSense

  • Artikel

Visual Studio bietet eine leistungsfähige, sofort einsatzfähige JavaScript-Bearbeitung. Unterstützt von einem TypeScript-basierten Sprachdienst bietet Visual Studio umfangreiche IntelliSense-Funktionen, Unterstützung für moderne JavaScript-Features und Produktivitätsfeatures wie „Gehe zu Definition“, Refactoring und vieles mehr.

Weitere Informationen zur allgemeinen IntelliSense-Funktionalität von Visual Studio finden Sie unter Using IntelliSense (Verwenden von IntelliSense).

IntelliSense für JavaScript zeigt eine Vielzahl weiterer Informationen zu Parameter- und Memberlisten an. Diese Informationen werden vom TypeScript-Sprachdienst bereitgestellt, der unter der Haube eine statische Analyse durchführt, um Ihren Code besser zu verstehen.

TypeScript verwendet mehrere Quellen, um diese Informationen zu erstellen:

IntelliSense (auf Typrückschluss basierend)

In JavaScript ist in den meisten Fällen keine explizite Typinformationen verfügbar. Glücklicherweise ist es in der Regel recht einfach, einen Typ mit dem angegebenen umgebenden Codekontext abzuleiten. Dieser Prozess wird als Typrückschluss bezeichnet.

Für eine Variable oder eine Eigenschaft ist der Typ in der Regel der Typ des Werts, der verwendet wird, um sie oder die aktuelle Zuweisung von Werten zu initialisieren.

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

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

Für eine Funktion kann der Rückgabetyp von den return-Anweisungen hergeleitet werden.

Für die Funktionsparameter ist derzeit kein Rückschluss vorhanden, aber es gibt Möglichkeiten, dieses Problem mithilfe von D.TS-Dateien von JSDoc oder TypeScript (siehe weiter unten) zu umgehen.

Darüber hinaus gibt es spezielle Rückschlüsse für Folgendes:

  • „ES3-Style“-Klassen, die mit einer Konstruktorfunktion und Zuweisungen der prototype-Eigenschaft angegeben sind.
  • CommonJS-Stil Modul Muster, die als Eigenschaftenzuweisungen auf das exports-Objekt oder Zuweisungen zu der module.exports-Eigenschaft angegeben sind.
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.

IntelliSense (auf JSDoc basierend)

Wo der Typrückschluss nicht die gewünschten Typinformationen liefert (oder die Dokumentation unterstützt), können Typinformationen ausdrücklich über JSDoc-Anmerkungen angegeben werden. Sie können beispielsweise den @type-Tag wie im Folgenden verwenden, um einem teilweise deklarierten Objekt einen bestimmten Typ zu geben:

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

Wie bereits erwähnt, werden Funktionsparameter nie hergeleitet. Verwenden Sie jedoch den JSDoc @param-Tag, können Sie auch Typen zu Funktionsparametern hinzufügen.

/**
 * @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".
}

Die derzeit unterstützten JsDoc-Anmerkungen finden Sie in den JsDoc-Informationen unter Typüberprüfung in JavaScript-Dateien.

IntelliSense (auf TypeScript-Deklarationsdateien basierend)

Da JavaScript und TypeScript auf dem gleichen Sprachdienst basieren, können sie auf vielfältige Weise interagieren. Beispielsweise kann JavaScript IntelliSense für die deklarierten Werte in der D.TS-Datei bereitgestellt werden (Weitere Infos), und in TypeScript deklarierte Typen wie Schnittstellen und Klassen stehen für die Verwendung als Typen in JSDoc-Kommentaren zur Verfügung. Weitere Informationen finden Sie in der Dokumentation zu TypeScript.

Im Folgenden wird ein einfaches Beispiel für eine TypeScript-Definitionsdatei dargestellt, die solche Typinformationen (über eine Schnittstelle) in einer JavaScript-Datei im selben Projekt (mit einem JsDoc-Tag) bereitstellt.

TypeScript-Definitionsdatei

Automatische Übernahme von Typdefinitionen

In TypeScript werden die APIs der am häufigsten verwendeten JavaScript-Bibliotheken durch D.TS-Dateien beschrieben, und die am häufigsten verwendete Repository für diese Definitionen befindet sich unter DefinitelyTyped.

Standardmäßig versucht der Sprachdienst zu ermitteln, welche JavaScript-Bibliotheken verwendet werden. Er lädt dann die entsprechende D.TS-Datei automatisch herunter, die die Bibliothek beschreibt, und verweist auf diese, um IntelliSense zu erweitern. Die Dateien werden in einen Cache, der sich im Benutzerordner unter %LOCALAPPDATA%\Microsoft\TypeScript befindet, heruntergeladen.

Hinweis

Dieses Feature ist standardmäßig deaktiviert, wenn eine TSCONFIG.JSON-Konfigurationsdatei verwendet wird, kann jedoch wie im Folgenden beschrieben aktiviert werden.

Die automatische Erkennung funktioniert derzeit für Abhängigkeiten, die von npm (durch Lesen der PACKAGE.JSON-Datei) oder Bower (durch Lesen der BOWER.JSON-Datei) heruntergeladen werden, sowie für einzelne Dateien im Projekt, die mit einer Liste übereinstimmen, die ungefähr die 400 beliebtesten JavaScript-Bibliotheken enthält. Wenn beispielsweise jquery-1.10.min.js in Ihrem Projekt vorhanden ist, wird die Datei jquery.d.ts abgerufen und geladen, um eine bessere Bearbeitung zu ermöglichen. Diese D.TS-Datei hat keine Auswirkung auf Ihr Projekt.

Zugehöriger Inhalt