IntelliSense para JavaScript

  • Artículo

Visual Studio proporciona una eficaz experiencia de edición de JavaScript lista para usar. 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 más información sobre la funcionalidad general de IntelliSense de Visual Studio, vea Usar IntelliSense.

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

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

IntelliSense basado en la inferencia de tipos

En JavaScript, la mayoría de las veces no hay ningún tipo explícito de información disponible. Afortunadamente, suele ser bastante fácil deducir un tipo según el contexto del código circundante. Este proceso se denomina inferencia de tipos.

En el caso de una variable o propiedad, el tipo es normalmente el tipo del valor que se usa para inicializarla 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

En el caso de una función, el tipo de valor devuelto puede deducirse a partir de las instrucciones return.

En el caso de parámetros de función, actualmente no hay ninguna inferencia, pero hay formas de solucionar este problema mediante archivos .d.ts de JSDoc o TypeScript (vea 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 de prototipo.
  • Patrones de módulo de estilo CommonJS, especificados como asignaciones de propiedad 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

Si la inferencia de tipos no proporciona la información de tipo deseada (o por compatibilidad con la documentación), se puede proporcionar información de tipo de forma explícita a través de anotaciones de JSDoc. Por ejemplo, para proporcionar a un objeto parcialmente declarado 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 ha mencionado, los parámetros de función no se deducen nunca. En cambio, con la etiqueta @param de JSDoc, 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 Comprobación de tipos de archivos JavaScript acerca de las anotaciones de JsDoc admitidas actualmente.

IntelliSense basado en archivos de declaración de TypeScript

Dado que TypeScript y JavaScript se basan en el mismo servicio de lenguaje, pueden interactuar de manera completa. 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 esa información de tipo (a través de una interfaz) a un archivo JavaScript del mismo proyecto (con una etiqueta de JsDoc).

TypeScript definition file

Adquisición automática de definiciones de tipo

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

De manera predeterminada, el servicio de lenguaje intenta detectar qué bibliotecas de JavaScript están en uso y, seguidamente, descargar y hacer referencia de forma automática al archivo .d.ts correspondiente que describe la biblioteca para proporcionar IntelliSense con más funcionalidades. 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 (al leer el archivo package.json), Bower (al leer el archivo bower.json) y para archivos separados 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 captura y carga para proporcionar una mejor experiencia de edición. Este archivo .d.ts no tiene ningún impacto en el proyecto.

Contenido relacionado