JavaScript IntelliSense

O Visual Studio fornece uma poderosa experiência de edição JavaScript pronta para uso. Alimentado por um serviço de linguagem baseado em TypeScript, o Visual Studio oferece IntelliSense avançado, suporte para recursos JavaScript modernos e recursos 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.

JavaScript IntelliSense exibe informações em listas de parâmetros e membros. Essas informações são fornecidas pelo serviço de linguagem TypeScript, que usa 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
• IntelliSense baseado em JSDoc
• IntelliSense com base em arquivos de declaração TypeScript
• Aquisição automática de definições de tipo

IntelliSense baseado na inferência de tipo

Em JavaScript, na maioria das vezes não há informações de tipo explícitas disponíveis. Felizmente, geralmente é fácil descobrir um tipo dado o contexto do 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á-la 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 a partir das instruções return.

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

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

• Classes "estilo ES3", especificadas usando uma função construtora e atribuições à propriedade 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 em 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 a um objeto parcialmente declarado um tipo específico, você pode usar a @type tag como mostrado aqui:

/**
 * @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 mencionado, os parâmetros de função nunca são inferidos. No entanto, usando a marca JSDoc @param, você também pode adicionar tipos aos parâmetros de função.

/**
 * @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 Arquivos JavaScript de verificação de tipo para as anotações JSDoc atualmente suportadas.

IntelliSense baseado em arquivos de declaração TypeScript

Como JavaScript e TypeScript são baseados no mesmo serviço de linguagem, eles são capazes de interagir de uma maneira rica. Por exemplo, pode ser fornecido JavaScript IntelliSense para valores declarados num ficheiro .d.ts (consulte a documentação do TypeScript), e tipos como interfaces e classes declaradas no TypeScript estão disponíveis para uso como tipos em comentários JSDoc.

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

do arquivo de definição TypeScript

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

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

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

Atualmente, a deteçã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 de aproximadamente as 400 bibliotecas JavaScript mais populares. Por exemplo, se tiveres jquery-1.10.min.js no teu projeto, o ficheiro jquery.d.ts será buscado e carregado para fornecer uma experiência de edição melhor. Este ficheiro .d.ts não terá impacto no seu projeto.

Configurar o IntelliSense

Você pode usar alterar o comportamento do preenchimento de instrução IntelliSense selecionando Ferramentas > Opções > Editor > de texto JavaScript/TypeScript > IntelliSense > Geral.

Quando você seleciona Usar somente Tab ou Enter para confirmar, o editor de código JavaScript acrescenta instruções com itens selecionados na lista de conclusão somente depois que você escolhe a tecla Tab ou Enter . Quando você desmarca essa caixa de seleção, outros caracteres – como ponto, vírgula, dois pontos, parêntese aberto e chave aberta ({) – também podem acrescentar instruções com os itens selecionados.

Conteúdo relacionado

• Usando o IntelliSense