TypeScript, RequireJS, jQuery plugins

Question

Я изучаю TypeScript, и, боюсь, я кусаю больше, чем могу пережевывать. Я нашел Уроки & примеры для

• имея файл с string constants in a module, а затем использовать его из каждого файла TS
• настройки компилятора для создания модулей ready to use with RequireJS, и с помощью импорта и модуля ключевых слов в машинописном
• extending jQuery interface in TypeScript, а затем писать код плагина в TS

Но я просто не могу заставить его работать все сразу.

У меня есть 3 файла, все из которых содержат отдельные плагины jQuery, но совместно используют некоторые константы. У меня есть отдельные файлы ts для всех страниц, используя их. Я хочу ссылаться на эти TS-файлы на странице в моем cshtml как <script data-main="app/this-page" type="text/javascript" src="lib/require.js"></script>, и на этой странице сказать что-то вроде «импортировать мой плагин», затем $("#someId").runMyPlugin(someSettings); «

Может ли кто-нибудь порекомендовать мне подход? Что сказать об экспорте? что я должен импортировать? что происходит в одном классе?

Answer 1

Если константы определены в классе, т.е. Constants.ts

export class Constants { 
    constant1: string = "firstConstant"; 
    constant2: string = "secondConstant"; 
} 

затем экспортировать этот класс, и импортировать туда, куда нужно.
т.е.

import ref_Constants = module("./Constants"); 
var firstConstant = ref_Constants.Constants.constant1; 

Использование модулей AMD будет автоматически загружать Constants.js, когда это требуется.

Update Ok, поэтому экспортировать плагин с помощью require.js для JQuery, вам нужно экспортировать символ $:
Это может быть сделано только с require.config и свойством прокладки. Вам потребуется что-то следующее:

require.config({ 
    baseUrl: '../', 
    paths: { 
     'jquery': 'lib/jquery-1.7.2', 
     'myjqueryextension': 'lib/myjqueryextension' // note this is the .js file 
    }, 
    shim: { 
     jquery: { 
      exports: '$' 
     }, 
     myjqueryextension: { 
      exports: '$' 
     } 
    } 
}); 

require(['jquery','myjqueryextension'], 
    ($, myjqueryextension) => { 
     // note that your extension will be attached to $ here, because of the shim 
     $('#test').myExtensionFunction('foo', 'bar'); 
    }); 

Важной частью здесь является экспорт: '$' линия в прокладке. Это добавит ваше расширение в $.

Answer 2

После настройки необходимо выполнить ответ от blorkfish, проблема заключается в том, чтобы убедить машинописный текст скомпилировать зависимость от плагина jquery как зависимости от AMD. Это может быть выполнено с помощью директивы obscure /// < amd-dependency path = "...">.

Использование jquery.cookie в качестве примера, вы можете добавить это в модуле typescipt:

/// <amd-dependency path="jquery.cookie"> 
import $ = require("jquery"); 
import ko = require("knockout"); 
export = yourmodule; 

module yourmodule { 
    ... 
} 

, который компилируется в:

define(["require", "exports", "jquery", "knockout", "jquery.cookie"], 
     function (require, exports, $, ko) { 
    var yourmodule; 
    ... 
} 

Итак, теперь вы можете использовать плагин в вашем машинописи модуль.

Answer 3

У меня возникали проблемы с настройкой и рабочим процессом AMD/RequireJS. Я просто разместил пример проекта на Github.

Я объединил Gulp, RequireJS и Typcript без необходимости в файлах прокладки. Он также включает в себя задачу по требованию и любым файлам поставщика, объединить их с файлами приложений и создать единый мини-JS-файл, который будет запускать все приложение. Надеюсь, это может помочь людям.

https://github.com/abogartz/typescript-amd-gulp-example