Delen via

JavaScript IntelliSense

  • Artikel

Visual Studio biedt direct een krachtige JavaScript-bewerkingservaring. Dankzij een op TypeScript gebaseerde taalservice biedt Visual Studio uitgebreide IntelliSense, ondersteuning voor moderne JavaScript-functies en productiviteitsfuncties zoals Go to Definition, herstructurering en meer.

Zie IntelliSense-gebruiken voor meer informatie over de algemene IntelliSense-functionaliteit van Visual Studio.

JavaScript IntelliSense geeft informatie weer over parameters en ledenlijsten. Deze informatie wordt geleverd door de TypeScript-taalservice, die achter de schermen statische analyse gebruikt om uw code beter te begrijpen.

TypeScript maakt gebruik van verschillende bronnen om deze informatie op te bouwen:

IntelliSense op basis van typedeductie

In JavaScript zijn er meestal geen expliciete typegegevens beschikbaar. Gelukkig is het meestal vrij eenvoudig om een type te achterhalen op basis van de omringende codecontext. Dit proces wordt typedeductie genoemd.

Voor een variabele of eigenschap is het type doorgaans het type van de waarde die wordt gebruikt om deze te initialiseren of de meest recente waardetoewijzing.

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

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

Voor een functie kan het retourtype worden afgeleid uit de retourinstructies.

Voor functieparameters is er momenteel geen deductie, maar er zijn manieren om dit te omzeilen met behulp van JSDoc- of TypeScript-.d.ts bestanden (zie latere secties).

Daarnaast is er speciale afleiding voor het volgende:

  • Klassen 'ES3-stijl', die zijn opgegeven met behulp van een constructorfunctie en toewijzingen aan de prototype-eigenschap.
  • CommonJS-modulepatronen, opgegeven als eigenschapstoewijzingen op het exports-object of toewijzingen aan de eigenschap 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 op basis van JSDoc

Wanneer typedeductie niet de gewenste typegegevens (of ter ondersteuning van documentatie) levert, kan typegegevens expliciet worden verstrekt via JSDoc-aantekeningen. Als u bijvoorbeeld een gedeeltelijk gedeclareerd object een specifiek type wilt geven, kunt u de tag @type gebruiken, zoals hieronder wordt weergegeven:

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

Zoals vermeld, worden functieparameters nooit afgeleid. Met behulp van de JSDoc @param tag kunt u echter ook typen toevoegen aan functieparameters.

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

Zie de JSDoc-informatie in JavaScript-bestanden typen controleren voor de JSDoc-aantekeningen die momenteel worden ondersteund.

IntelliSense op basis van TypeScript-declaratiebestanden

Omdat JavaScript en TypeScript zijn gebaseerd op dezelfde taalservice, kunnen ze op een uitgebreide manier communiceren. JavaScript IntelliSense kan bijvoorbeeld worden opgegeven voor waarden die zijn gedeclareerd in een .d.ts-bestand (zie TypeScript-documentatie) en typen zoals interfaces en klassen die in TypeScript zijn gedeclareerd, zijn beschikbaar voor gebruik als typen in JSDoc-opmerkingen.

Hieronder ziet u een eenvoudig voorbeeld van een TypeScript-definitiebestand dat dergelijke typegegevens (via een interface) levert aan een JavaScript-bestand in hetzelfde project (met behulp van een JSDoc tag).

TypeScript-definitiebestand

Automatische overname van typedefinities

In de TypeScript-wereld zijn de populairste JavaScript-bibliotheken hun API's beschreven door middel van .d.ts bestanden, en de meest voorkomende opslagplaats voor dergelijke definities bevindt zich op DefinitelyTyped.

De taalservice probeert standaard te detecteren welke JavaScript-bibliotheken worden gebruikt en downloadt en verwijst vervolgens automatisch naar het bijbehorende .d.ts-bestand dat de bibliotheek beschrijft om uitgebreidere IntelliSense te bieden. De bestanden worden gedownload naar een cache die zich onder de gebruikersmap bevindt op %LOCALAPPDATA%\Microsoft\TypeScript-.

Notitie

Deze functie is standaard uitgeschakeld als u een tsconfig.json-configuratiebestand gebruikt, maar deze functie is mogelijk ingesteld op ingeschakeld, zoals hieronder wordt beschreven.

Op dit moment werkt automatische detectie voor afhankelijkheden die zijn gedownload van npm (door het package.json-bestand te lezen), Bower (door het bower.json-bestand te lezen) en voor losse bestanden in uw project die overeenkomen met een lijst met ongeveer de 400 populairste JavaScript-bibliotheken. Als u bijvoorbeeld jquery-1.10.min.js in uw project hebt, wordt het bestand jquery.d.ts opgehaald en geladen om een betere bewerkingservaring te bieden. Dit .d.ts bestand heeft geen invloed op uw project.

Verwante inhoud