Nasıl typescript modülü için jQuery AMD modülünü gerektirir. Örneğin en komut dosyaları için dizin yapısı aşağıdaki gibidir diyelim:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
Ben jquery-1.8.2.js require.js aracılığıyla yüklenir gerektirecek şekilde module.ts gelen js oluşturulan dosyayı istiyorum.
Şu anda var:
içe jquery = modülü ( 'jquery')
Bu sonuçlanır adı jquery geçerli kapsamda mevcut değil.
Bu standart aşağıda 0.9+ yöntemi hala çalıştığı yer, yine değişiyor ama ES6 ile aşağıdaki modül yükleme kullanılabilir geliyor gibi görünüyor. (referans: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
ve hatta kısmen de
import {extend} from "jquery";
(TSD yüklüyse bu hala, jquery.d.ts gerektirir - tsd install jquery)
ormanlar için TSD yüklemek için: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
senin jquery.d.ts bir harici modülü tanımlamak yoksa Ve ayrıca, jquery.d.ts aşağıdakileri ekleyin:
declare module "jquery" {
export = $;
}
Bunun etrafında karışıklık bir çok jQuery gerçekten kullanımını engeller Harici Modülü gibi hareket etmediğini nedeniyle olduğunu düşünüyorum importaçıklamada. Çözüm oldukça basit, temiz ve bir iş-etrafında gibi hissetmiyorum için yeterli zarif.
Ben basit bir örnek yukarı yazdım daktilo RequireJS ve jQuery kullanarak aşağıdaki gibi çalışır, ...
Sen den tip tanımları kapmak Kesinlikle Yazılan RequireJS ve jQuery için.
Artık typescript dosyasının içinde statik yazarak ham RequireJS kullanabilirsiniz.
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.');
});
});
Ve sonra sadece sayfanıza tek bir komut dosyası etiketi eklemek gerekir:
<script data-main="app" src="require.js"></script>
diğer çözümlerle karşılaştırıldığında Faydaları?
.d.tsiçin dosyası)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;
}
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
İlk (get gerektirir-jquery ) resmi github repo. Bundan sonra dizin gibi görünecektir:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Şu typescript JQuery ve AMD modülleri ile çalışmak için en kolay yolu main.ts aşağıdaki yazmaktır:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Ve test.html gelen çağrı:
<!DOCTYPE html>
<html>
<head>
<script data-main="main" src="require-jquery.js"></script>
</head>
<body>
<h1>TypeScript JQuery AMD test</h1>
</body>
</html>
Bu yardımcı olur umarım!
Sen yol ve dosya (eksi .js uzantılı) tarafından dış modülleri başvuru, ya da sadece dosya adına göre küresel eğer. senin durumda, module.ts içinde yapmalısınız:
import jquery = module('./jquery-1.8.2');
Ile derlemeye unutmayın --module AMDvarsayılan olarak commonjs kullanan bir kod alırsınız beri requireişlevini.