Como usar jQuery com TypeScript

Estou tentando

$(function(){ 
    alert('Hello'); 
});

Está mostrando este erro no Visual Studio: (TS) Não é possível encontrar o nome '$'.. Como posso usar jQuery com TypeScript?

Resposta #1

É muito provável que você precise baixar e incluir o arquivo de declaração TypeScript para jQuery—jquery.d.ts—em seu projeto.

Opção 1: Instale o pacote @types (Recomendado para TS 2.0+)

Na mesma pasta do seu arquivo package.json, execute o seguinte comando:

npm install --save-dev @types/jquery

Então o compilador irá resolver as definições para o jquery automaticamente.

Opção 2: Baixar Manualmente (Não Recomendado)

Baixe aqui.

Opção 3: Usando Tipagens (Antes do TS 2.0)

Se você estiver usando typings, então você pode incluí-lo desta maneira:

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

Após configurar o arquivo de definição, importe o alias ($) no arquivo TypeScript desejado para usá-lo normalmente.

import $ from "jquery";
// or
import $ = require("jquery");

Você pode precisar compilar com --allowSyntheticDefaultImports—adicione "allowSyntheticDefaultImports": true em tsconfig.json.

Também instalar o pacote?

Se você não tem o jQuery instalado, provavelmente você quer instalá-lo como uma dependência via npm (mas isso nem sempre é o caso):

npm install --save jquery

Resposta #2

Para Angular CLI V2+

npm install jquery --save
npm install @types/jquery --save

Certifique-se de que o jquery tenha uma entrada em angular.json -> scripts

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

Vá para tsconfig.app.json e adicione uma entrada em compilerOptions -> types

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Resposta #3

No meu caso, eu tive que fazer isso

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

Então, no arquivo de script A.ts

import * as $ from "jquery";
... jquery code ...

Resposta #4

PARA Visual Studio Code

O que funciona para mim é garantir que eu faça o carregamento padrão da biblioteca JQuery via uma tag <script> no index.html.

Correr

npm install --save @types/jquery

Agora as funções JQuery $ estão disponíveis em todos os arquivos .ts, sem necessidade de quaisquer outros imports.

Resposta #5

Acredito que você pode precisar dos tipos do Typescript para JQuery. Como você disse que está usando o Visual Studio, você poderia usar o Nuget para obtê-los.

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

O comando no Console do Gerenciador de Pacotes Nuget é

Install-Package jquery.TypeScript.DefinitelyTyped

Atualização: Como observado no comentário, este pacote não é atualizado desde 2016. Mas você ainda pode visitar a página deles no Github em https://github.com/DefinitelyTyped/DefinitelyTyped e baixar os tipos. Navegue até a pasta da sua biblioteca e então baixe o arquivo index.d.ts de lá. Coloque-o em qualquer lugar no diretório do seu projeto e o VS deve usá-lo imediatamente.

Resposta #6

ATUALIZAÇÃO 2019:

A resposta de David é mais precisa.

O Typescript suporta bibliotecas de fornecedores terceirizados, que não utilizam Typescript para o desenvolvimento da biblioteca, usando o repositório DefinitelyTyped.

Você precisa declarar jquery/$ em seu Componente, se o tsLint estiver ativado para esse tipo de verificação de tipo.

Por exemplo.

declare var jquery: any;
declare var $: any;