Como usar o jQuery com TypeScript

eu estou tentando

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

Sua mostrando esse erro no Visual Studio: (TS) Cannot find name '$'.. Como posso usar o jQuery com TypeScript?

Provavelmente, você precisa baixar e incluir o arquivo de declaração TypeScript para jQuery jquery.d.ts- em seu projeto.

Opção 1: instalar o pacote @types (recomendado para TS 2.0+)

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

npm install --save-dev @types/jquery

Em seguida, o compilador resolverá as definições para o jquery automaticamente.

Opção 2: Baixar manualmente (não recomendado)

Faça o download aqui .

Opção 3: Usando tipagens (anteriores ao TS 2.0)

Se você estiver usando digitações , poderá 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

Depois de 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—add "allowSyntheticDefaultImports": trueno tsconfig.json .

Também instalar o pacote?

Se você não possui o jquery instalado, provavelmente deseja instalá-lo como uma dependência via npm (mas esse nem sempre é o caso):

npm install --save jquery

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

Em seguida, no arquivo de script A.ts

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

PARA código do Visual Studio

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

Corre

npm install --save @types/jquery

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

Acredito que você possa precisar das tipografias do Typecript para JQuery. Desde que você disse que está usando o Visual Studio, você pode usar o Nuget para obtê-los.

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

O comando no Nuget Package Manager Console é

Install-Package jquery.TypeScript.DefinitelyTyped

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

Para Angular CLI V7

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

Verifique se o jquery possui uma entrada em angular.json -> scripts

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

Vá para tsconfig.app.json e adicione uma entrada em "types"

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

ATUALIZAÇÃO 2019:

Responder por David , é mais preciso.

O Typecript suporta bibliotecas de fornecedores de terceiros, que não usam o Typecript para o desenvolvimento da biblioteca, usando o DefinitelyTyped Repo .

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

Por exemplo.

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

Se você deseja usar o jquery em um aplicativo da web (por exemplo, React) e o jquery já está carregado com <script src="jquery-3.3.1.js"...

Na página da web, você pode:

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

portanto, você não precisa carregar o jquery pela segunda vez (com npm install --save jquery), mas tem todas as vantagens do Typescript

Aqui estão minhas etapas de configuração do TypeScript e jQuery.

Faz com que os tipos de jQuery suportem para funcionar melhor do que a maioria dos artigos na Internet . ( Acredito. )

primeiro:

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

segundo (muito muito muito importante!!!):

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

então, você pode se divertir:

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

É suave como seda !!!

Este trabalho para mim agora e hoje na versão Angular 9

1. Instale via npm this: npm i @ types / jquery basta adicionar --save para configurar globalmente.
2. Vá para tsconfig.app.json e adicione na matriz "types" jquery.
3. ng servir e pronto.

Isso funciona para mim:

export var jQuery: any = window["jQuery"];