Partager via

JavaScript IntelliSense

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 facile de déterminer un type dans le 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 JSDoc ou de TypeScript .d.ts fichiers (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 @type balise comme indiqué ici :

/**
 * @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 sont en mesure d’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.

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 indiqué plus loin dans cette section.

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.

Configurer IntelliSense

Vous pouvez modifier le comportement de la complétion des instructions IntelliSense en sélectionnant Outils > Options > Éditeur de texte > JavaScript/TypeScript > IntelliSense > Général.

Lorsque vous sélectionnez Utiliser uniquement Tab ou Entrée pour valider, l’éditeur de code JavaScript ajoute des instructions parmi les éléments sélectionnés dans la liste de complétion uniquement après que vous ayez choisi la touche Tab ou Entrée. Lorsque vous désélectionnez cette case à cocher, d’autres caractères , tels qu’un point, une virgule, un signe deux-points, une parenthèse ouverte et une accolade ouverte ({) peuvent également ajouter des instructions avec les éléments sélectionnés.

Contenu connexe