eu estou tentando
$(function(){
alert('Hello');
});
Sua mostrando esse erro no Visual Studio: (TS) Cannot find name '$'.
. Como posso 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?
Respostas:
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": true
no 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
import * as $ from 'jquery'
Error TS1192 Module '"jquery"' has no default export.
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.
javascript declare var jquery: any; declare var $: any;
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.ts
arquivo 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;
declare
palavra - chave é usada. No entanto, ainda podemos dizer ao vscode sobre as tipagens, se elas estiverem presentes node_modules
, é por isso que a instalação das tipagens ajuda no intellisense, mas para um projeto vanilla webpack, sem a declare
transpilação do projeto de palavras-chave falhará. Eu removi minha declaração da resposta, para não confundir as pessoas.
import JQuery from 'jquery'; declare var $: JQuery;
. Não tenho certeza, se isso vai funcionar.
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 !!!
declare global { interface Window { $ :JQueryStatic; } }
yourTypeDeclaration.d.ts. E, considerando adequadamente, é necessário verificar se $ está montado na 【janela】. Tal como import $ = require('jquery'); window.$ = $ ;
, ou o seu jQuery 【$】 foi montado por uma tag de script externa.
import $ = require('jquery') ; window.$ = $;
. (É melhor você iniciar este, no ponto de início do projeto. E eu prefiro criar um sdk
dir, para gerenciar todos os requisitos da biblioteca externa e inicializar em um arquivo ou local).
Este trabalho para mim agora e hoje na versão Angular 9
import * as $ from "jquery";