Compartilhar via

JavaScript IntelliSense

  • Artigo

O Visual Studio fornece uma experiência avançada de edição de JavaScript pronta para uso. Alimentado por um serviço de linguagem baseado em TypeScript, o Visual Studio oferece IntelliSense avançado, suporte para funcionalidades modernas do JavaScript e funcionalidades de produtividade, como Go to Definition, refatoração e muito mais.

Para obter mais informações sobre a funcionalidade geral do IntelliSense do Visual Studio, consulte Usando o IntelliSense.

O IntelliSense do JavaScript exibe informações sobre listas de parâmetros e membros. Essas informações são fornecidas pelo serviço de linguagem TypeScript, que usa a análise estática nos bastidores para entender melhor seu código.

O TypeScript usa várias fontes para criar essas informações:

IntelliSense com base na inferência de tipo

No JavaScript, na maioria das vezes não há informações de tipo explícitas disponíveis. Felizmente, geralmente é bastante fácil descobrir um tipo dado o contexto de código ao redor. Esse processo é chamado de inferência de tipo.

Para uma variável ou propriedade, o tipo normalmente é o tipo do valor usado para inicializá-lo ou a atribuição de valor mais recente.

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

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

Para uma função, o tipo de retorno pode ser inferido das instruções de retorno.

Para parâmetros de função, atualmente não há nenhuma inferência, mas há maneiras de contornar isso usando arquivos .d.ts JSDoc ou TypeScript (consulte seções posteriores).

Além disso, há uma inferência especial para o seguinte:

  • Classes de “estilo ES3”, especificadas usando uma função de construtor e atribuições à propriedade de protótipo.
  • Padrões de módulo no estilo CommonJS, especificados como atribuições de propriedade no objeto exports ou atribuições à propriedade 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 baseado no JSDoc

Quando a inferência de tipo não fornece as informações de tipo desejadas (ou para dar suporte à documentação), as informações de tipo podem ser fornecidas explicitamente por meio de anotações JSDoc. Por exemplo, para dar um tipo específico a um objeto parcialmente declarado, você pode usar a marca @type, conforme mostrado abaixo:

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

Conforme mencionado, os parâmetros de função nunca são inferidos. No entanto, você também pode adicionar tipos aos parâmetros de função usando a marca @param do JSDoc.

/**
 * @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 as informações do JSDoc em Verificação de Tipos de Arquivos JavaScript para ver as anotações do JSDoc com suporte no momento.

IntelliSense baseado em arquivos de declaração TypeScript

Como JavaScript e TypeScript são baseados no mesmo serviço de idioma, eles são capazes de interagir de maneira avançada. Por exemplo, o JavaScript IntelliSense pode ser fornecido para valores declarados em um arquivo de .d.ts (consulte a documentação do TypeScript ), e tipos como interfaces e classes declaradas no TypeScript estão disponíveis para serem usados como tipos em comentários JSDoc.

Abaixo, mostramos um exemplo simples de um arquivo de definição TypeScript fornecendo essas informações de tipo (por meio de uma interface) para um arquivo JavaScript no mesmo projeto (usando uma tag JSDoc).

arquivo de definição TypeScript

Aquisição automática de definições de tipo

No mundo do TypeScript, as bibliotecas JavaScript mais populares têm suas APIs descritas por arquivos .d.ts e o repositório mais comum para essas definições está no DefinitelyTyped.

Por padrão, o serviço de linguagem tenta detectar quais bibliotecas do JavaScript estão em uso e baixará e referenciará automaticamente o arquivo .d.ts correspondente que descreve a biblioteca, a fim de fornecer um IntelliSense mais completo. Os arquivos são baixados em um cache localizado na pasta do usuário em %LOCALAPPDATA%\Microsoft\TypeScript.

Nota

Esse recurso é desabilitado por padrão se você estiver usando um arquivo de configuração tsconfig.json, mas pode ser definido como habilitado conforme descrito mais abaixo.

Atualmente, a detecção automática funciona para dependências baixadas do npm (lendo o arquivo package.json), Bower (lendo o arquivo bower.json) e para arquivos soltos em seu projeto que correspondem a uma lista das 400 bibliotecas JavaScript mais populares. Por exemplo, se você tiver jquery-1.10.min.js em seu projeto, o arquivo jquery.d.ts será buscado e carregado para fornecer uma melhor experiência de edição. Esse arquivo .d.ts não terá impacto no projeto.

Conteúdo relacionado