Dela via

JavaScript IntelliSense

  • Artikel

Visual Studio erbjuder en kraftfull JavaScript-redigeringsupplevelse direkt vid start. Visual Studio drivs av en TypeScript-baserad språktjänst och levererar omfattande IntelliSense, stöd för moderna JavaScript-funktioner och produktivitetsfunktioner som Go to Definition, refaktorisering med mera.

Mer information om de allmänna IntelliSense-funktionerna i Visual Studio finns i Using IntelliSense.

JavaScript IntelliSense visar information om parameter- och medlemslistor. Den här informationen tillhandahålls av TypeScript-språktjänsten, som använder statisk analys i bakgrunden för att bättre förstå din kod.

TypeScript använder flera källor för att bygga upp den här informationen:

IntelliSense baserat på typinferens

I JavaScript finns det för det mesta ingen explicit typinformation tillgänglig. Lyckligtvis är det vanligtvis ganska lätt att räkna ut en typ med tanke på den omgivande kodkontexten. Den här processen kallas typinferens.

För en variabel eller egenskap är typen vanligtvis den typ av värde som används för att initiera den eller den senaste värdetilldelningen.

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

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

För en funktion kan returtypen härledas från returinstruktionerna.

För funktionsparametrar finns det för närvarande ingen slutsatsdragning, men det finns sätt att kringgå detta med hjälp av JSDoc- eller TypeScript-.d.ts-filer (se senare avsnitt).

Dessutom finns det en särskild slutsats för följande:

  • Klasser i "ES3-stil", som anges med hjälp av en konstruktorfunktion och tilldelningar till prototypegenskapen.
  • CommonJS-modulmönster, specificeras som egenskapstilldelningar på exports-objektet eller som tilldelningar till egenskapen 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.

IntelliSense baserat på JSDoc

Om typinferens inte ger önskad typinformation (eller för att stödja dokumentation) kan typinformation anges explicit via JSDoc-anteckningar. Om du till exempel vill ge ett delvis deklarerat objekt en viss typ kan du använda taggen @type enligt nedan:

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

Som nämnts härleds aldrig funktionsparametrar. Men med JSDoc @param tagg kan du lägga till typer i funktionsparametrar också.

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

Se JSDoc-informationen i Typkontroll av JavaScript-filer för de JSDoc-anteckningar som för närvarande stöds.

IntelliSense baserat på TypeScript-deklarationsfiler

Eftersom JavaScript och TypeScript baseras på samma språktjänst kan de interagera på ett omfattande sätt. JavaScript IntelliSense kan till exempel anges för värden som deklareras i en .d.ts -fil (se TypeScript-dokumentation), och typer som gränssnitt och klasser som deklareras i TypeScript är tillgängliga för användning som typer i JSDoc-kommentarer.

Nedan visar vi ett enkelt exempel på en TypeScript-definitionsfil som tillhandahåller sådan typinformation (via ett gränssnitt) till en JavaScript-fil i samma projekt (med hjälp av en JSDoc tagg).

TypeScript-definitionsfil

Automatiskt förvärv av typdefinitioner

I TypeScript-världen har de mest populära JavaScript-biblioteken sina API:er som beskrivs av .d.ts filer, och den vanligaste lagringsplatsen för sådana definitioner finns på DefinitelyTyped.

Som standard försöker språktjänsten identifiera vilka JavaScript-bibliotek som används och sedan automatiskt ladda ned och referera till motsvarande .d.ts fil som beskriver biblioteket för att ge mer omfattande IntelliSense. Filerna laddas ned till en cache som finns under användarmappen på %LOCALAPPDATA%\Microsoft\TypeScript.

Not

Den här funktionen är inaktiverad som standard om du använder en tsconfig.json konfigurationsfil, men kan vara inställd på aktiverad enligt beskrivningen nedan.

För närvarande fungerar automatisk identifiering för beroenden som laddats ned från npm (genom att läsa filen package.json), Bower (genom att läsa filen bower.json) och för lösa filer i projektet som matchar en lista över ungefär de 400 mest populära JavaScript-biblioteken. Om du till exempel har jquery-1.10.min.js i ditt projekt hämtas och läses filen jquery.d.ts in för att ge en bättre redigeringsupplevelse. Den här .d.ts filen påverkar inte projektet.

Relaterat innehåll