Compartir a través de

JavaScript IntelliSense

  • Artículo

Visual Studio proporciona una eficaz experiencia de edición de JavaScript directamente de fábrica. Con tecnología de un servicio de lenguaje basado en TypeScript, Visual Studio proporciona IntelliSense con amplias funcionalidades, compatibilidad con características modernas de JavaScript y características de productividad, como Ir a definición, la refactorización y mucho más.

Para obtener más información sobre la funcionalidad general de IntelliSense de Visual Studio, consulte Using IntelliSense.

IntelliSense de JavaScript muestra información sobre las listas de parámetros y miembros. Este servicio de lenguaje TypeScript proporciona esta información, que usa análisis estáticos en segundo plano para comprender mejor el código.

TypeScript usa varios orígenes para crear esta información:

IntelliSense basado en la inferencia de tipos

En JavaScript, la mayoría de las veces no hay ninguna información de tipo explícita disponible. Por suerte, normalmente es bastante fácil averiguar un tipo dado el contexto de código circundante. Este proceso se denomina inferencia de tipos.

Para una variable o propiedad, el tipo suele ser el tipo del valor utilizado para inicializarlo o la asignación de valor más reciente.

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

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

Para una función, el tipo de valor devuelto se puede deducir de las instrucciones return.

En el caso de los parámetros de función, actualmente no hay ninguna inferencia, pero hay maneras de solucionarlo mediante archivos de .d.ts JSDoc o TypeScript (consulte las secciones posteriores).

Además, hay una inferencia especial para lo siguiente:

  • Clases de "estilo ES3", especificadas mediante una función de constructor y asignaciones a la propiedad prototipo.
  • Patrones de módulo de estilo CommonJS, especificados como asignaciones de propiedades en el objeto exports o asignaciones a la propiedad 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 basado en JSDoc

Cuando la inferencia de tipos no proporciona la información de tipo deseada (o para respaldar la documentación), se puede proporcionar explícitamente información de tipo a través de anotaciones de JSDoc. Por ejemplo, para proporcionar a un objeto declarado parcialmente un tipo específico, puede usar la etiqueta @type como se muestra a continuación:

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

Como se mencionó, los parámetros de función nunca se deducen. Sin embargo, con la etiqueta JSDoc @param también puede agregar tipos a parámetros de función.

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

Consulte la información de JSDoc en sobre la comprobación de tipos en archivos JavaScript para ver las anotaciones de JSDoc que se admiten actualmente.

IntelliSense basado en archivos de declaración de TypeScript

Dado que JavaScript y TypeScript se basan en el mismo servicio de lenguaje, pueden interactuar de forma enriquecida. Por ejemplo, se puede proporcionar IntelliSense para JavaScript para valores declarados en un archivo .d.ts (vea la documentación de TypeScript), y los tipos como interfaces y clases declarados en TypeScript están disponibles para su uso como tipos en comentarios de JSDoc.

A continuación, se muestra un ejemplo sencillo de un archivo de definición de TypeScript que proporciona dicha información de tipo (a través de una interfaz) a un archivo JavaScript en el mismo proyecto (mediante una etiqueta JSDoc).

archivo de definición de TypeScript

Adquisición automática de definiciones de tipos

En el mundo de TypeScript, las bibliotecas de JavaScript más populares tienen sus APIs descritas por archivos .d.ts, y el repositorio más común para estas definiciones se encuentra en DefinitelyTyped.

De forma predeterminada, el servicio de lenguaje intenta detectar qué bibliotecas de JavaScript están en uso y, a continuación, descarga y hace referencia automáticamente al archivo de .d.ts correspondiente que describe la biblioteca para proporcionar IntelliSense más completo. Los archivos se descargan en una caché ubicada en la carpeta de usuario en %LOCALAPPDATA%\Microsoft\TypeScript.

Nota

Esta característica está deshabilitada de forma predeterminada si se usa un archivo de configuración tsconfig.json, pero se puede habilitar, como se describe más adelante.

Actualmente, la detección automática funciona para las dependencias descargadas desde npm (leyendo el archivo package.json), Bower (leyendo el archivo bower.json) y para los archivos sueltos del proyecto que coinciden con una lista de aproximadamente las 400 bibliotecas de JavaScript más populares. Por ejemplo, si tiene jquery-1.10.min.js en el proyecto, el archivo jquery.d.ts se capturará y cargará para proporcionar una mejor experiencia de edición. Este archivo .d.ts no tendrá ningún impacto en el proyecto.

Contenido relacionado