Tải không đồng bộ các khai báo TypeScript không có xuất khẩu

Question

Tôi có một số plugin jQuery mà tôi muốn tải bằng cách sử dụng mẫu AMD trong TypeScript. Ví dụ: tôi có thể có cấu trúc này:

/lib/jquery.myplugin.js 
/app.ts 

Plugin đơn giản mở rộng jQuery. Nó không cung cấp các hàm hoặc biến cấp cao nhất mới. Một ví dụ có thể là:

// jquery.myplugin.js 
jQuery.fn.myExample = function() { ... } 

Các jquery.myplugin.d.ts tập tin tương ứng trông giống như:

interface JQuery { 
    myExample(); 
} 

Vì vậy mà bây giờ trong app.ts tôi có thể gọi một cái gì đó giống như $('#my-element').myExample(). Lưu ý rằng điều này giả định rằng tôi đã có các khai báo jquery.d.ts từ Microsoft được nạp.

Câu hỏi của tôi là làm cách nào để tải thư viện này một cách không đồng bộ và tận dụng lợi thế của kiểu gõ tĩnh TypeScripts? Tôi có thể sử dụng nó như thế này:

/// <reference path="lib/jquery.myplugin.d.ts"/> 

nhưng điều đó đòi hỏi tôi phải thêm một thẻ <script> sang HTML của tôi, và thư viện không được tải không đồng bộ. Tôi muốn TypeScript tạo mã này:

define(["require", "exports", "lib/jquery.myplugin"], function (require, exports, __jquery.myplugin__) { 
    ... 
    // Use my plugin 
    $('#my-element').myExample(); 
} 

Tuy nhiên vì không có tệp xuất trong tệp .d.ts, tôi không thể viết import myplugin = module('lib/jquery.myplugin').

Gần nhất tôi nhận được là tạo một jquery.myplugin.d.ts tham chiếu tệp ts khác với khai báo giao diện và bao gồm ít nhất một lần xuất. Tuy nhiên không có gì để xuất khẩu trong thư viện này, và để có được đầu ra mong muốn, tôi không chỉ thêm một xuất khẩu mà còn phải gọi nó.

Cập nhật: Tôi đã mở một work item cho điều này trên typescript.codeplex.com

Answer 1

Loại bản ghi sẽ không nhập mô-đun trừ khi chúng xuất một cái gì đó và trừ khi bạn trực tiếp sử dụng những gì chúng đã xuất, nhưng những điều đó không đúng với những thứ như plugin JQuery chỉ đơn giản thêm phương thức mới vào $. Giải pháp là sử dụng cờ phụ thuộc amd theo tài liệu here.

Thêm một dòng như thế này ở trên cùng của tập tin của bạn:

///<amd-dependency path="jgrowl" /> 

Điều này sẽ buộc typescript để liệt kê nó trong define gọi trong javascript biên soạn. Bạn cũng sẽ cần thiết lập đường dẫn và shim cho plugin của mình trong require.config, như sau:

require.config({ 
    paths: { 
    jquery: "external/jquery-2.1.1", 
    jgrowl: "external/jquery.jgrowl-1.4.0.min", 
    }, 
    shim: { 
    'jgrowl': { deps: ['jquery'] }, 
    } 
}); 

Answer 2

Kind của một hack nhưng đây là cách duy nhất tôi hiện biết.

myplugin.d.ts: mở rộng giao diện JQueryStatic bao gồm IntelliSense cho chức năng myplugin của

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

interface JQueryStatic { 
    myFunc(): string; 
} 

myplugin.ts: một tập tin dummy mà mục đích duy nhất là để có nguyên cảo tạo ra một định nghĩa module amd .

var test: number = 1; 

consumer.ts:

/// <reference path="myplugin.d.ts" /> 

import myplugin = module('myplugin'); 

// without this typescript knows you aren't actually using the module 
// and won't create the define block including your plugin 
var workaround = myplugin.test; 

$.myFunc(); 

consumer.js: tạo ra với tsc -c --module amd consumer.ts

define(["require", "exports", 'myplugin'], function(require, exports, __myplugin__) { 
    /// <reference path="myplugin.d.ts" /> 
    var myplugin = __myplugin__; 

    // without this typescript knows you aren't actually using the module 
    // and won't create the define block including your plugin 
    var workaround = myplugin.test; 
    $.myFunc(); 
}) 

Lưu ý rằng myplugin.d.ts sẽ kéo IntelliSense trong cho cả jQuery và các định nghĩa plugin của bạn. Nó là cần thiết để tạo cả myplugin.d.ts và myplugin.ts vì tôi không biết cách (nếu có thể) xuất một cái gì đó đồng thời mở rộng giao diện hiện có trong cùng một tệp mà không có lỗi.

Answer 3

Ở dưới cùng của tập tin rằng giao diện được định nghĩa bên trong bạn có thể đặt:

export var JQuery: JQueryStatic; 

nào sẽ làm cho IntelliSense cho JQuery hiển thị trên bất kỳ tập tin được tải sử dụng import module.

Nếu tập tin của bạn đang được tải không đồng bộ và bạn đang thiết JQuery để biến khác (ví dụ myJQuery) bạn có thể tuyên bố rằng các tập tin đã được nạp bởi một điểm nhất định, ví dụ, nếu bạn có nộp tại của bạn ///<reference path=...> bạn sẽ có thể sử dụng:

declare var myJQuery: JQuery; 

để làm bạn myJQuery loại JQuery.

Hack khác là để chèn giao diện trực tiếp vào khu vực nơi mã đang được tải không đồng bộ:

interface JQueryStatic { 
    myFunc(): string; 
} 

Nếu bạn không nhớ chỉnh sửa JQuery.d.ts các tập tin, bạn có thể thêm chức năng của bạn với các giao diện được xác định trong đó.

liên quan trở lại ví dụ của bạn, bạn sẽ có thể làm điều gì đó như:

declare var __jquery : JQueryStatic; 

Ở phía trên của callback xác định của bạn; và miễn là bạn đã mở rộng giao diện cho JQueryStatic và bao gồm nó bằng cách sử dụng ///<reference path=...> đánh dấu sẽ hoạt động như mong muốn.