Как требовать jquery через AMD в TypeScript

Как мне использовать модуль jquery AMD для моего модуля TypeScript. Например, пусть структура каталогов для скриптов выглядит так:

    jquery-1.8.2.js
    jquery.d.ts
    module.ts
    require.js

Я хочу, чтобы сгенерированный js файл из модуля .ts требовал загрузки jquery-1.8.2.js через require.js.

В настоящее время у меня есть:

    import jquery = module('jquery')

Это приводит к Имя "jquery" не существует в текущей области.

ОТВЕТЫ

Ответ 1

FOR TYPESCRIPT 1.7 +

Похоже, что стандарт снова меняется, где работает метод ниже 0,9+, но с ES6 в будущем можно использовать загрузку следующего модуля. (ссылка: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105)

import * as $ from "jquery";

и даже частичные

import {extend} from "jquery";

(для этого все еще требуется jquery.d.ts, если tsd установлен - tsd install jquery)

для установки tsd: npm install tsd -g

ДЛЯ TYPESCRIPT 0,9 +

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

Кроме того, если ваш jquery.d.ts не определяет внешний модуль, добавьте следующее в jquery.d.ts:

declare module "jquery" {
    export = $;
}

Ответ 2

Я думаю, что большая путаница вокруг этого связана с тем, что jQuery не действует как внешний модуль, который запрещает использование оператора import. Решение довольно чистое, простое и изящное, чтобы не чувствовать себя вокруг.

Я написал простой пример Использование RequireJS и jQuery в TypeScript, который работает следующим образом:

Вы берете определения типов из Определенно Typed для RequireJS и jQuery.

Теперь вы можете использовать raw RequireJS со статическим набором внутри файла TypeScript.

app.ts

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />

require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

И тогда вам нужно добавить только один тег script на страницу:

<script data-main="app" src="require.js"></script>

Преимущества по сравнению с другими решениями?

  • Вы можете самостоятельно обновлять jQuery и RequireJS
  • Вам не нужно полагаться на обновляемый проект shim
  • Вам не нужно вручную загружать jQuery (или что-либо еще, что не является "модулем", для которого есть файл .d.ts)

Ответ 3

  • Возьмите базовый jquery.d.ts из источника TS (TypeScriptFile)
  • Переместите объявления() из JQueryStatic в модуль следующим образом:
  • в вашем модуле кода импортируйте jQuery:
import $ = module("jquery");

declare module "jquery" {
   export function (selector: string, context?: any): JQuery;
   export function (element: Element): JQuery;
   export function (object: { }): JQuery;
   export function (elementArray: Element[]): JQuery;
   export function (object: JQuery): JQuery;
   export function (func: Function): JQuery;
   export function (): JQuery;
}
  1. Скомпилируйте свой модуль как AMD (tsc -module amd my_code.ts)
  2. Используйте requirejs для компоновки вашего приложения на стороне клиента со следующим разделом конфигурации:
requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});

Ответ 4

Сначала получите (require-jquery) из официального репозитория github. После этого ваш каталог будет выглядеть так:

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

В настоящее время самый простой способ работы с модулями JQuery и AMD на TypeScript состоит в том, чтобы написать следующее на main.ts:

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

И назовите это из вашего test.html:

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>
        <h1>TypeScript JQuery AMD test</h1>
    </body>
</html>

Надеюсь, это поможет!

Ответ 5

Вы ссылаетесь на внешние модули по пути и имени файла (за вычетом расширения .js) или просто по имени файла, если они глобальны. В вашем случае вы должны сделать это внутри module.ts:

import jquery = module('./jquery-1.8.2');

Не забудьте скомпилировать с --module AMD, поскольку по умолчанию вы получите код, который использует функцию commonjs require.