IntelliSense per JavaScript

  • Articolo

Visual Studio include potenti strumenti di modifica per JavaScript pronti all'uso. 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à IntelliSense generale 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.

Per ottenere le informazioni necessarie, TypeScript usa diverse fonti:

IntelliSense basato sull'inferenza del tipo

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

Per una variabile o una proprietà, il tipo è in genere il tipo del valore usato per l'inizializzazione oppure l'assegnazione di un 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 return.

Per i parametri di funzione l'inferenza non è attualmente disponibile, ma è possibile risolvere il problema mediante i file .d.ts JSDoc o TypeScript (vedere le sezioni successive).

È anche disponibile una funzionalità di inferenza speciale per i seguenti elementi:

  • Classi "in stile ES3", specificate mediante una funzione costruttore e assegnazioni alla proprietà prototype.
  • Modelli di modulo in stile CommonJS, specificati come assegnazioni di proprietà nell'oggetto exports oppure 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 un tipo specifico a un oggetto parzialmente dichiarato si può 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 detto, l'inferenza non è mai valida per i parametri funzione. Tuttavia con il tag JSDoc @param è possibile aggiungere tipi anche ai parametri 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".
}

Vedere le informazioni JsDoc in Controllo dei tipi di file JavaScript per le annotazioni JsDoc attualmente supportate.

IntelliSense basato su file dichiarazione TypeScript

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

Di seguito viene visualizzato un esempio semplice di file di definizione TypeScript che specifica questo tipo di informazioni (attraverso un'interfaccia) a un file JavaScript nello stesso progetto (mediante un tag JsDoc).

TypeScript definition file

Acquisizione automatica delle definizioni dei tipi

Nell'ambito TypeScript, le API delle librerie JavaScript più diffuse sono descritte da file .d.ts e il repository più comune per tali definizioni si trova in DefinitelyTyped.

Per impostazione predefinita, il servizio di linguaggio tenta di rilevare le librerie JavaScript in uso e quindi scaricare e fare riferimento automaticamente al file con estensione d.ts corrispondente che descrive la libreria per fornire IntelliSense più completo. I file vengono scaricati in una cache posta all'interno della cartella dell'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 abilitato 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. Se ad esempio nel progetto è presente jquery-1.10.min.js, verrà recuperato e caricato il file jquery.d.ts per garantire una funzionalità di modifica più completa. Tale file .d.ts non avrà alcun impatto sul progetto.

Contenuto correlato