Partage via

JavaScript IntelliSense

  • Article

Visual Studio offre une expérience d’édition JavaScript puissante immédiatement prête à l’emploi. 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 la fonctionnalité IntelliSense générale de Visual Studio, consultez Utilisation d’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

En JavaScript, la plupart du temps, aucune information de type explicite n’est disponible. Heureusement, il est généralement assez facile de déterminer un type à partir du contexte de code environnant. Ce processus est appelé 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 l’affectation de valeur la plus récente.

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 actuellement aucune inférence, mais il existe des façons de contourner ce problème à l’aide de fichiers JSDoc ou TypeScript .d.ts (voir les sections ultérieures).

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

  • Classes « ES3-style », spécifiées à l’aide d’une fonction de constructeur et d’affectations à la propriété 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

Lorsque l’inférence de type ne fournit pas les informations de type souhaitées (ou pour prendre en charge la documentation), les informations de type peuvent être fournies explicitement via des 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 JSDoc @param, vous pouvez également ajouter des types aux paramètres de 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 Vérification des types des fichiers JavaScript pour 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 manière riche. Par exemple, JavaScript IntelliSense peut être fourni pour les valeurs déclarées dans un fichier .d.ts (voir documentation TypeScript), et les types tels que les interfaces et les classes déclarées dans TypeScript sont disponibles pour une utilisation en tant que types dans les commentaires JSDoc.

Ci-dessous, nous montrons un exemple simple de fichier de définition TypeScript fournissant de telles informations de type (via une interface) à un fichier JavaScript dans le même projet (à l’aide d’une balise de JSDoc).

fichier de définition TypeScript

Acquisition automatique des définitions de type

Dans le monde de TypeScript, les bibliothèques JavaScript les plus populaires ont leurs API décrites par des fichiers .d.ts, et le référentiel le plus courant pour ces définitions se trouve sur DefinitelyTyped.

Par défaut, le service de langage tente de détecter les bibliothèques JavaScript en cours d’utilisation, puis de télécharger et de référencer automatiquement le fichier .d.ts correspondant qui décrit la bibliothèque afin de fournir intelliSense plus riche. Les fichiers sont téléchargés dans un cache situé sous le dossier utilisateur à %LOCALAPPDATA%\Microsoft\TypeScript.

Note

Cette fonctionnalité est désactivée par défaut si vous utilisez un fichier de configuration tsconfig.json, mais peut être activée comme indiqué ci-dessous.

Actuellement, 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 dans votre projet qui correspondent à une liste d’environ 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 sera récupéré et chargé afin de fournir une meilleure expérience d’édition. Ce fichier .d.ts n’aura aucun impact sur votre projet.

Contenu connexe