Freigeben über

JavaScript IntelliSense

Visual Studio bietet direkt einsatzbereite, leistungsstarke JavaScript-Bearbeitungsmöglichkeiten. 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 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.

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

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

Bei einer Funktion kann der Rückgabetyp von den Rückgaben 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-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 basierend auf JSDoc

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

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

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

Anmerkung

Dieses Feature ist standardmäßig deaktiviert , wenn Sie eine tsconfig.json Konfigurationsdatei verwenden, aber möglicherweise so festgelegt werden, dass sie weiter unten in diesem Abschnitt aktiviert ist.

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.

Konfigurieren von IntelliSense

de-DE: Sie können das Verhalten des IntelliSense-Anweisungsvervollständigung ändern, indem Sie Tools > Options > Text Editor > JavaScript/TypeScript > IntelliSense > General auswählen.

Wenn Sie Nur die TAB- oder EINGABETASTE zum Abschließen verwenden auswählen, hängt der JavaScript-Code-Editor Anweisungen mit Elementen aus der Abschlussliste erst an, nachdem Sie die TAB- oder EINGABETASTE gedrückt haben. Wenn Sie dieses Kontrollkästchen deaktivieren, können andere Zeichen , z. B. ein Punkt, Komma, Doppelpunkt, offene Klammer und öffnende geschweifte Klammer ({) auch Anweisungen an die ausgewählten Elemente anfügen.

Verwandte Inhalte