Auf Englisch lesen

Freigeben über

JavaScript IntelliSense

  • Artikel

Visual Studio bietet ein leistungsstarkes JavaScript-Entwicklungserlebnis direkt nach der Installation. Unterstützt von einem TypeScript-basierten Sprachdienst bietet Visual Studio umfangreiche IntelliSense-Funktionen, Unterstützung für moderne JavaScript-Features und Produktivitätsfeatures wie Go to Definition, Refactoring und vieles mehr.

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

JavaScript IntelliSense zeigt Informationen zu Parameter- und Memberlisten an. Diese Informationen werden vom TypeScript-Sprachdienst bereitgestellt, der hinter den Kulissen statische Analysen verwendet, um Ihren Code besser zu verstehen.

TypeScript verwendet mehrere Quellen, um diese Informationen zu erstellen:

IntelliSense basierend auf Typinference

In JavaScript gibt es in der meisten Zeit keine expliziten Typinformationen. Glücklicherweise ist es in der Regel relativ einfach, einen Typ anhand des umgebenden Codekontexts herauszufinden. Dieser Prozess wird als Typinferenz bezeichnet.

Bei einer Variablen oder Eigenschaft ist der Typ in der Regel der Typ des Werts, der zum Initialisieren des Werts oder der letzten Wertzuweisung verwendet wird.

JavaScript 
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 abgeleitet werden.

Für Funktionsparameter gibt es derzeit keine Rückschlüsse, aber es gibt Möglichkeiten, dies mithilfe von JSDoc- oder TypeScript-.d.ts Dateien zu umgehen (siehe spätere Abschnitte).

Darüber hinaus gibt es eine besondere Ableitung für Folgendes:

  • "ES3-style"-Klassen, die mithilfe einer Konstruktorfunktion und Zuordnungen zur Prototypeigenschaft angegeben werden.
  • CommonJS-Modulmuster, angegeben als Eigenschaftszuweisungen für das exports-Objekt oder Zuweisungen für die module.exports-Eigenschaft.
JavaScript 
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 basierend auf JSDoc

Wenn die Typinferenz die gewünschten Typinformationen nicht bereitstellt (oder zur Unterstützung der Dokumentation), können die Typinformationen explizit über JSDoc-Anmerkungen bereitgestellt werden. Wenn Sie z. B. einem teilweise deklarierten Objekt einen bestimmten Typ zuweisen möchten, können Sie das @type-Tag wie unten gezeigt verwenden:

JavaScript 
/**
 * @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 abgeleitet. Mithilfe des JSDoc-@param-Tags können Sie jedoch auch Typen zu Funktionsparametern hinzufügen.

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

Lesen Sie die JSDoc-Informationen in Type Checking JavaScript Files, um einen Überblick über die momentan unterstützten JSDoc-Annotationen zu erhalten.

IntelliSense basierend auf TypeScript-Deklarationsdateien

Da JavaScript und TypeScript auf demselben Sprachdienst basieren, können sie auf vielfältige Weise interagieren. JavaScript IntelliSense kann beispielsweise für Werte bereitgestellt werden, die in einer .d.ts-Datei deklariert sind (siehe TypeScript-Dokumentation), und Typen wie Schnittstellen und Klassen, die in TypeScript deklariert sind, stehen zur Verwendung als Typen in JSDoc-Kommentaren zur Verfügung.

Unten zeigen wir ein einfaches Beispiel für eine TypeScript-Definitionsdatei, die solche Typinformationen (über eine Schnittstelle) für eine JavaScript-Datei im selben Projekt bereitstellt (mit einem JSDoc-Tag).

TypeScript-Definitionsdatei

Automatische Erfassung von Typdefinitionen

In der TypeScript-Welt verfügen die beliebtesten JavaScript-Bibliotheken über ihre APIs, die von .d.ts Dateien beschrieben werden, und das häufigste Repository für solche Definitionen befindet sich auf DefinitelyTyped.

Standardmäßig versucht der Sprachdienst zu erkennen, welche JavaScript-Bibliotheken verwendet werden, und lädt dann automatisch die entsprechende .d.ts Datei herunter, die die Bibliothek beschreibt, um umfangreichere IntelliSense bereitzustellen. Die Dateien werden in einen Cache heruntergeladen, der sich unter dem Benutzerordner unter %LOCALAPPDATA%\Microsoft\TypeScriptbefindet.

Hinweis

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

Derzeit funktioniert die automatische Erkennung für Abhängigkeiten, die von npm heruntergeladen wurden (durch Lesen der package.json Datei), Bower (durch Lesen der bower.json Datei) und für lose Dateien in Ihrem Projekt, die einer Liste der 400 beliebtesten JavaScript-Bibliotheken entsprechen. Wenn Sie beispielsweise jquery-1.10.min.js in Ihrem Projekt haben, wird die Datei jquery.d.ts abgerufen und geladen, um eine bessere Bearbeitung zu ermöglichen. Diese .d.ts Datei hat keine Auswirkungen auf Ihr Projekt.

Verwandte Inhalte