Compartilhar via

JavaScript IntelliSense

  • Artigo

O Visual Studio fornece uma experiência de edição de JavaScript avançada pronta para uso. Ativado por um serviço de linguagem baseado no TypeScript, o Visual Studio oferece um IntelliSense sofisticado, suporte para recursos modernos do JavaScript e recursos de produtividade como Ir para Definição, refatoração e muito mais.

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

O JavaScript IntelliSense exibe informações sobre listas de parâmetro e de 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 o código.

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

IntelliSense com base em inferência de tipos

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

Para uma variável ou uma propriedade, em geral, o tipo é 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 de instruções de returno.

Para parâmetros de função, atualmente, não há nenhuma inferência, mas existem maneiras de resolver esse problema usando arquivos JSDoc ou TypeScript .d.ts (confira as próximas seções).

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 de 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 com base em JSDoc

Nos casos em que a inferência de tipos não fornecer 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 do JSDoc. Por exemplo, para fornecer um tipo específico a um objeto parcialmente declarado, é possível usar a marcação @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, usando a marcação @param do JSDoc, é possível adicionar tipos a parâmetros de função também.

/**
 * @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 com base em arquivos de declaração TypeScript

Como o JavaScript e o TypeScript são baseados no mesmo serviço de linguagem, eles podem interagir de forma sofisticada. Por exemplo, o JavaScript IntelliSense pode ser fornecido para valores declarados em um arquivo .d.ts (confira a Documentação do TypeScript), e tipos como interfaces e classes declaradas em TypeScript estão disponíveis para serem usados como tipos em JsDoc.

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

Arquivo de definição de TypeScript

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

No mundo do TypeScript, as bibliotecas mais populares do JavaScript têm suas APIs descritas por arquivos .d.ts e o repositório mais comum dessas definições está em 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.

Observação

Esse recurso estará desabilitado por padrão se um arquivo de configuração tsconfig.json estiver sendo usado, mas poderá ser definido como habilitado, conforme descrito mais abaixo.

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

Conteúdo relacionado