Как использовать 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:

Install-Package jquery.TypeScript.DefinitelyTyped

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

Для углового CLI V7

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

Убедитесь, что в jquery есть запись в angular.json -> scripts

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

Перейдите в tsconfig.app.json и добавьте запись в «types»

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

ОБНОВЛЕНИЕ 2019:

Ответ Дэвида , точнее.

Typescript поддерживает библиотеки сторонних поставщиков, которые не используют Typescript для разработки библиотек, используя DefiniteTyped 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 !')
    }
}

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

Это работает для меня сейчас и сегодня на Angular версии 9

1. Установите через npm это: npm i @ types / jquery просто добавьте --save для настройки по всему миру.
2. Перейдите в tsconfig.app.json и добавьте в массив «types» jquery.
3. NG служить и готово.

Это работает для меня:

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