IntelliSense JavaScript

  • Article

Visual Studio procure une expérience d’édition JavaScript puissante et immédiate. Grâce à un service de langage TypeScript, Visual Studio offre des fonctionnalités IntelliSense riches, une prise en charge des fonctionnalités JavaScript modernes et des fonctionnalités de productivité, parmi lesquelles Atteindre la définition ou la refactorisation.

Pour plus d’informations sur les fonctionnalités IntelliSense générales de Visual Studio, consultez Utilisation de la fonctionnalité IntelliSense.

JavaScript IntelliSense affiche des informations sur les listes de paramètres et de membres. Ces informations sont fournies par le service de langage TypeScript, qui utilise l’analyse statique en arrière-plan pour mieux comprendre votre code.

TypeScript utilise plusieurs sources pour générer ces informations :

IntelliSense basé sur l’inférence de type

Dans JavaScript, la plupart du temps, aucune information de type explicite n’est disponible. Heureusement, il est en général assez facile de déduire un type en fonction du contexte du code. Ce processus porte le nom d’inférence de type.

Pour une variable ou une propriété, le type est généralement le type de la valeur utilisée pour l’initialiser ou celui de la valeur la plus récemment assignée.

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

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

Pour une fonction, le type de retour peut être déduit des instructions return.

Pour les paramètres de fonction, il n’existe aucune inférence, mais vous pouvez contourner ce problème à l’aide de fichiers .d.ts JSDoc ou TypeScript (voir les sections suivantes).

En outre, il existe une inférence spéciale pour les éléments suivants :

  • Classes de « style ES3 », spécifiées à l’aide d’une fonction de constructeur et d’assignations à la propriété de prototype
  • Modèles de module de style CommonJS, spécifiés sous forme d’assignations de propriété sur l’objet exports ou d’assignations à la propriété 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 basé sur JSDoc

Si l’inférence de type ne fournit pas les informations de type souhaitées (ou pour prendre en charge de la documentation), vous pouvez fournir les informations de type explicitement par le biais d’annotations JSDoc. Par exemple, pour donner à un objet partiellement déclaré un type spécifique, vous pouvez utiliser la balise @type comme indiqué ci-dessous :

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

Comme mentionné, les paramètres de fonction ne sont jamais déduits. Toutefois, à l’aide de la balise @param JSDoc, vous pouvez également ajouter des types aux paramètres de la fonction.

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

Consultez les informations JsDoc dans Type Checking JavaScript Files pour connaître les annotations JsDoc actuellement prises en charge.

IntelliSense basé sur des fichiers de déclaration TypeScript

Étant donné que JavaScript et TypeScript sont basés sur le même service de langage, ils peuvent interagir de façon complète. Par exemple, vous pouvez fournir JavaScript IntelliSense pour les valeurs déclarées dans un fichier .d.ts (voir la documentation TypeScript) et utiliser les types tels que les interfaces et classes déclarées dans TypeScript en tant que types dans les commentaires JsDoc.

Nous présentons ci-après un exemple simple de fichier de définition TypeScript qui fournit ces informations de type (par le biais d’une interface) à un fichier JavaScript dans le même projet (à l’aide d’une balise JsDoc).

Fichier de définition TypeScript

Acquisition automatique de définitions de type

Dans l’univers TypeScript, ce sont des fichiers .d.ts qui décrivent les API des bibliothèques JavaScript les plus populaires, tandis que le dépôt le plus courant pour de telles définitions est DefinitelyTyped.

Par défaut, le service de langage tente de détecter quelles bibliothèques JavaScript sont en cours d’utilisation, puis télécharge et référence automatiquement le fichier .d.ts correspondant qui décrit la bibliothèque afin de fournir une expérience IntelliSense plus riche. Les fichiers sont téléchargés vers un cache situé dans le dossier de l’utilisateur à l’emplacement %LOCALAPPDATA%\Microsoft\TypeScript.

Remarque

Cette fonctionnalité est désactivée par défaut si vous utilisez un fichier de configuration tsconfig.json, mais peut être activée, comme expliqué plus bas.

La détection automatique fonctionne pour les dépendances téléchargées à partir de npm (en lisant le fichier package.json), Bower (en lisant le fichier bower.json) et pour les fichiers libres de votre projet qui correspondent à une liste regroupant à peu près les 400 bibliothèques JavaScript les plus populaires. Par exemple, si vous avez jquery-1.10.min.js dans votre projet, le fichier jquery.d.ts est extrait et chargé afin de procurer une meilleure expérience d’édition. Ce fichier .d.ts n’a aucun impact sur votre projet.

Contenu connexe