Condividi tramite

JavaScript IntelliSense

  • Articolo

Visual Studio offre un'esperienza di modifica JavaScript potente immediatamente disponibile. Basato su un servizio di linguaggio basato su TypeScript, Visual Studio offre funzionalità avanzate di IntelliSense, supporto per le funzionalità JavaScript moderne e funzionalità di produttività, ad esempio Vai a definizione, refactoring e altro ancora.

Per altre informazioni sulla funzionalità generale di IntelliSense di Visual Studio, vedere Uso di IntelliSense.

JavaScript IntelliSense visualizza informazioni sugli elenchi di parametri e membri. Queste informazioni vengono fornite dal servizio di linguaggio TypeScript, che usa l'analisi statica in background per comprendere meglio il codice.

TypeScript usa diverse origini per creare queste informazioni:

IntelliSense basato sull'inferenza del tipo

In JavaScript, nella maggior parte dei casi non sono disponibili informazioni sul tipo esplicite. Fortunatamente, in genere è abbastanza facile capire un tipo dato il contesto del codice circostante. Questo processo è denominato inferenza del tipo.

Per una variabile o una proprietà, il tipo è in genere il tipo del valore utilizzato per inizializzarlo o l'assegnazione di valore più recente.

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

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

Per una funzione, il tipo restituito può essere dedotto dalle istruzioni di ritorno.

Per i parametri di funzione, attualmente non esiste alcuna inferenza, ma esistono modi per risolvere questo problema usando JSDoc o TypeScript .d.ts file (vedere le sezioni successive).

Inoltre, esiste un'inferenza speciale per quanto segue:

  • Classi "in stile ES3", specificate usando una funzione del costruttore e assegnazioni alla proprietà del prototipo.
  • Modelli di modulo di tipo CommonJS, specificati come assegnazioni di proprietà nell'oggetto exports o assegnazioni alla proprietà 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 basato su JSDoc

Se l'inferenza del tipo non fornisce le informazioni sul tipo desiderate (o per supportare la documentazione), le informazioni sul tipo possono essere fornite in modo esplicito tramite annotazioni JSDoc. Ad esempio, per assegnare a un oggetto parzialmente dichiarato un tipo specifico, è possibile usare il tag @type come illustrato di seguito:

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

Come accennato, i parametri della funzione non vengono mai dedotti. Tuttavia, usando il tag JSDoc @param è possibile aggiungere tipi anche ai parametri della funzione.

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

Consulta le informazioni JSDoc in Type Checking JavaScript Files per le annotazioni JSDoc attualmente supportate.

IntelliSense basato sui file di dichiarazione TypeScript

Poiché JavaScript e TypeScript sono basati sullo stesso servizio di linguaggio, possono interagire in modo avanzato. È ad esempio possibile specificare JavaScript IntelliSense per i valori dichiarati in un file .d.ts (vedere documentazione di TypeScript) e tipi come interfacce e classi dichiarate in TypeScript sono disponibili per l'uso come tipi nei commenti JSDoc.

Di seguito viene illustrato un semplice esempio di file di definizione TypeScript che fornisce tali informazioni sul tipo (tramite un'interfaccia) a un file JavaScript nello stesso progetto (usando un tag JSDoc).

file di definizione TypeScript

Acquisizione automatica delle definizioni dei tipi

Nel mondo TypeScript, le librerie JavaScript più diffuse hanno le API descritte dai file di .d.ts e il repository più comune per tali definizioni è in SicuramenteTyped.

Per impostazione predefinita, il servizio di linguaggio tenta di rilevare le librerie JavaScript in uso e quindi scaricare e fare riferimento automaticamente al file .d.ts corrispondente che descrive la libreria per fornire IntelliSense più completo. I file vengono scaricati in una cache che si trova nella cartella utente in %LOCALAPPDATA%\Microsoft\TypeScript.

Nota

Questa funzionalità è disabilitata per impostazione predefinita se si usa un file di configurazione tsconfig.json, ma può essere impostata su abilitata come descritto di seguito.

Attualmente, il rilevamento automatico funziona per le dipendenze scaricate da npm (leggendo il file package.json), Bower (leggendo il file bower.json) e per i file separati nel progetto che corrispondono a un elenco di circa 400 librerie JavaScript più diffuse. Ad esempio, se si dispone di jquery-1.10.min.js nel progetto, il file jquery.d.ts verrà recuperato e caricato per offrire un'esperienza di modifica migliore. Questo file .d.ts non avrà alcun impatto sul progetto.

Contenuto correlato