Как использовать jQuery с помощью TypeScript

Ответ 1

Скорее всего, вам нужно скачать и включить файл объявления 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

Ответ 2

FOR Код Visual Studio

Что для меня работает, так это убедиться, что я выполняю стандартную загрузку библиотеки JQuery через script > в index.html.

Run

npm install --save @types/jquery

Теперь функции JQuery $доступны во всех файлах .ts, без необходимости каких-либо других импортов.

Ответ 3

В моем случае я должен был сделать это

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

Ответ 4

Я считаю, что для JQuery вам могут понадобиться машинописные машинописи. Поскольку вы сказали, что используете Visual Studio, вы можете использовать Nuget для их получения.

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

Команда в консоли Nuget Package Manager

Install-Package jquery.TypeScript.DefinitelyTyped

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

Ответ 5

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

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

Typescript поддерживает библиотеки сторонних поставщиков, которые не используют Typescript для разработки библиотек, используя DefinitiveTyped Repo.

Вам необходимо объявить jquery/$ в вашем компоненте, если tsLint включен для этих типов проверок типов.

Например,

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

Ответ 6

Для углового 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"
]
}

Ответ 7

Если вы хотите использовать 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

Ответ 8

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

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

Ответ 9

Я пишу сообщение в блоге здесь, чтобы решить эту проблему

Ответ 10

Вот мои шаги по конфигурированию 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 !')
    }
}

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