TypeScript и библиотеки, такие как jQuery (с файлами .d.ts)

Я просмотрел все интернеты, но мне еще предстоит найти исчерпывающее руководство, в котором рассказывается, как взять библиотеку, такую как jquery, и использовать ее в проекте TypeScript. Если есть руководство, которое существует, я хотел бы знать, где в противном случае это то, что мне действительно нужно знать:

Я понимаю, что файл .d.ts предназначен только для intellisense, и что мне нужно, чтобы заставить jquery фактически работать (скомпилировать с ts?).
Нужно ли мне использовать requires или //reference при использовании VS2013, и если да, то что это на самом деле делает?
Все, что нужно сделать из этих файлов .d.ts и jquery js для использования библиотеки (или любой библиотеки) в моем проекте ts.

Мне удалось составить почти все остальное, но это было довольно неприятно.

Ответ 1

Вам не нужно компилировать jquery в typescript, вам просто нужно использовать файл определения, который сообщает Typescript, как работает библиотека JavaScript.

Получить определения здесь: https://github.com/borisyankov/DefinitelyTyped

или из NuGet, если вы используете Visual Studio.

Затем просто напишите свой Typescript как обычно, и при необходимости объявите свою библиотеку:

declare var library : libraryTypedName

например, файл jquery d.ts уже делает это для вас (проверьте снизу):

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts

Теперь, когда вы введете $ файл .ts, он должен дать вам Typescript intellisense.

Теперь единственными вещами, которые вы хотите включить в свой пакет bundleconfig/ <script>, являются файлы .js, как ваши, так и jquery/другие библиотеки. Typescript только время COMPILE!

Ответ 2

Соглашение в TypeScript должно содержать файл reference.ts или reference.d.ts в вашем проекте, который приведет к этим внешним ссылкам.

Итак, в вашем файле reference.ts добавьте путь к вашему jquery.d.ts (путь будет относиться к файлу reference.ts):

/// <reference path="../relative/path/to/jquery.d.ts"/>

Затем вы должны иметь возможность использовать определения jQuery в своем проекте.

ПРИМЕЧАНИЕ. Файл reference.ts является условным, но вы можете фактически добавить директиву <reference path="..."/> в любой файл TypeScript, если это необходимо.

Из TypeScript Спецификация языка (PDF) 11.1.1:

Комментарий формы /// <reference path="…"/> добавляет зависимость от исходного файла указанный в аргументе path. Путь разрешен относительно каталога содержащего исходный файл.

Ответ 3

Я использую его в VS 2015, и я новичок в typescript. Я использовал jQuery и листовки в своем проекте. Мое решение:

Загрузите все эти libraies из менеджера NuGet в VS 2015.
Перетащите файлы библиотеки (.js), как указано в этом уроке:

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

Измените файл index.html, добавив эти строки.

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />

<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>

Измените файл index.ts. Сначала добавьте эти строки сверху, чтобы ссылаться на ваши библиотеки. Возможно, вам придется изменить путь.

Добавьте выигранный код внутри onDeviceReady(), иначе вы можете получить ошибку выполнения javascript, например sysmbol "$" не определен. Я думаю, это связано с тем, что коды пытаются загрузить некоторую функцию, когда устройство еще не готово. Это сработало для меня. Надеюсь, это тоже поможет вам.

    function onDeviceReady() {

    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);


    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    // your code goes here

    }

Ответ 4

это решение не для typescript пуристов:), но если вы предпочитаете однострочное решение, просто добавьте эту строку в ваш .ts файл:

declare var $: any

а затем используйте $ в любом месте вашего кода typescript, как если бы вы были в js-коде.