Як користуватися jQuery з TypeScript

я намагаюся

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

Його показує цю помилку в Visual Studio: (TS) Cannot find name '$'.. Як я можу використовувати jQuery з TypeScript?

Швидше за все, вам потрібно завантажити та включити файл декларації TypeScript для jQuery—jquery.d.ts у свій проект.

Варіант 1: Встановіть пакет @types (рекомендується для TS 2.0+)

У тій самій папці, що і ваш файл package.json , запустіть таку команду:

npm install --save-dev @types/jquery

Тоді компілятор вирішить визначення для jquery автоматично.

Варіант 2: Завантажити вручну (не рекомендується)

Завантажте його тут .

Варіант 3: Використання типів (попередньо TS 2.0)

Якщо ви використовуєте типізацію, тоді ви можете включити її так:

// 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

Після налаштування файлу визначення імпортуйте псевдонім ( $) у потрібний файл TypeScript, щоб використовувати його як зазвичай.

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

Можливо, вам знадобиться компілювати з --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": trueв tsconfig.json .

Також встановити пакет?

Якщо у вас не встановлено jquery, ви, ймовірно, хочете встановити його як залежність через npm (але це не завжди так):

npm install --save jquery

У моєму випадку мені довелося це зробити

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

Потім у файл сценарію A.ts

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

ДЛЯ коду Visual Studio

Що для мене працює - це переконатися, що я виконую стандартне завантаження бібліотеки JQuery за допомогою <script> тег у index.html.

Біжи

npm install --save @types/jquery

Тепер функції JQuery $ доступні у всіх .ts-файлах, не потрібно жодного іншого імпорту.

Я вважаю, що вам можуть знадобитися типізація Typescript для JQuery. Оскільки ви сказали, що використовуєте Visual Studio, ви можете використовувати Nuget, щоб отримати їх.

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

Команда в Nuget Package Manager Console є

Install-Package jquery.TypeScript.DefinitelyTyped

Оновлення: Як зазначається в коментарі, цей пакет не оновлювався з 2016 року. Але ви все одно можете відвідати їхню сторінку Github за адресою https://github.com/DefinitelyTyped/DefinitelyTyped та завантажити типи. Перейдіть до папки вашої бібліотеки та завантажте index.d.tsфайл туди. Надішліть його будь-де в каталозі проектів, і VS повинен використовувати його відразу.

Для кутових CLI V7

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

Переконайтеся, що у jquery є запис у сценаріїх angular.json ->

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

Перейдіть на сторінку tsconfig.app.json і додайте запис у "типах"

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

ОНОВЛЕННЯ 2019:

Відповідь Девіда - точніша.

Typescript підтримує сторонні бібліотеки постачальників, які не використовують Typescript для розробки бібліотек, використовуючи DefinitelyTyped Repo .

Вам потрібно оголосити jquery/ $у своєму компоненті, якщо для цих типів перевірок типів tsLint увімкнено.

Напр.

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

Якщо ви хочете використовувати jquery у веб-додатку (наприклад, React), і jquery вже завантажений <script src="jquery-3.3.1.js"...

На веб-сторінці ви можете:

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

тож вам не потрібно завантажувати jquery вдруге (з npm install --save jquery), але маєте всі переваги Typescript

Ось мій етап конфігурації TypeScript & jQuery.

Це робить підтримку типів jQuery для роботи краще, ніж більшість статей в Інтернеті . ( Я вірю. )

перший:

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

друге (дуже-дуже важливо!!):

import jquery = require("jquery");



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

тоді Ви можете насолоджуватися цим:

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

Це шовковисто гладко !!!

Ця робота для мене зараз і сьогодні в кутовій версії 9

1. Встановіть через npm це: npm i @ types / jquery просто додайте --save для налаштування в усьому світі.
2. Перейдіть на сторінку tsconfig.app.json і додайте до масиву jquery масив.
3. Подаємо і готово.

Це працює для мене:

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