내보내기가없는 TypeScript 선언의 비동기로드

Question

TypeScript에서 AMD 패턴을 사용하여로드하려는 jQuery 플러그인이 여러 개 있습니다. 예를 들어 다음 구조를 가질 수 있습니다.

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

이 플러그인은 단순히 jQuery를 확장합니다. 새로운 최상위 함수 또는 변수를 제공하지 않습니다. 예는 다음과 같을 수 있습니다 내가 $('#my-element').myExample() 뭔가를 호출 할 수 있습니다 app.ts 지금 그래서

interface JQuery { 
    myExample(); 
} 

그 :

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

대응 jquery.myplugin.d.ts 파일처럼 보인다. 여기서는 Microsoft가 jquery.d.ts 선언을 이미 가지고 있다고 가정합니다.

내 질문은이 라이브러리를 비동기 적으로로드하고 TypeScripts 정적 입력을 활용하는 방법입니까? 나는이처럼 사용할 수 있습니다

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

하지만 내 HTML에 <script> 태그를 추가하는 저를 필요로하며, 라이브러리가 비동기 적으로로드되지 않습니다. 내가 import myplugin = module('lib/jquery.myplugin')을 쓸 수 없습니다

.d.ts에는 수출이 없다 그러나 이후

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

가 파일 : 나는 타이프 라이터가이 코드를 생성합니다.

가장 가까운 것은을 인터페이스 선언으로 다른 ts 파일을 참조하고 적어도 하나의 내보내기를 포함하는 것입니다. 그러나이 라이브러리에서 내보낼 내용은 없으며 원하는 출력을 얻으려면 내보내기를 추가 할뿐만 아니라 호출해야합니다.

업데이트 : 나는 해킹의 typescript.codeplex.com

Answer 1

Typescript는 뭔가를 내 보내지 않고 직접 내 보낸 것을 사용하지 않으면 모듈을 가져 오지 않지만, $에 새 메소드를 추가하는 JQuery 플러그인과 같은 경우에는 해당 사항이 적용되지 않습니다. 해결책은 문서화 된 here처럼 amd-dependency 플래그를 사용하는 것입니다.

는 파일의 상단에 다음과 같은 라인을 추가

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

이 컴파일 된 자바 스크립트의 define 호출에 나열하는 타이프 라이터를 강제 할 것이다. 당신은 또한 다음과 같이 당신의 require.config에 플러그인에 대한 경로 및 심의를 설정해야합니다 :

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

Answer 2

종류에 이것에 대한 work item을 열었지만 여기에 내가 현재 알고있는 유일한 방법했다.

myplugin.d.ts는 :

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

interface JQueryStatic { 
    myFunc(): string; 
} 

myplugin.ts myplugin의 기능성 인텔리 포함하도록 JQueryStatic 인터페이스를 확장한다 그의 유일한 목적으로하는 것이다 더미 파일을 타이프는 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 : myplugin.d.ts이 속 인텔리 당길 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(); 
}) 

메모 생성 jQuery와 플러그인 정의 모두. myplugin.d.ts와 myplugin.ts를 모두 만드는 것이 필요했는데, 같은 파일에서 기존 인터페이스를 오류없이 확장하면서 뭔가를 내보내는 방법 (가능하다면)을 모르기 때문에.인터페이스를 넣을 수 있습니다 당신 안에 정의 된 파일의 맨 아래에

Answer 3

: JQuery와의 인텔리들이 import module를 사용하여로드 된 파일에 표시 할 것

export var JQuery: JQueryStatic; 

.

파일은 비동기 적으로로드되고 그리고 당신은 당신이있는 경우, 예를 들어, 파일이 이미 특정 지점에 의해로드 된 것을 선언 할 수있는 또 다른 변수 (예 : myJQuery)로 JQuery와을 설정하는 경우 에 파일을 당신의 ///<reference path=...> 사용 할 수 있어야한다 :

declare var myJQuery: JQuery; 

유형 JQuery와의 당신의 myJQuery하려면. 당신이 당신의 JQuery.d.ts에게 파일을 편집 괜찮다면

interface JQueryStatic { 
    myFunc(): string; 
} 

, 당신은 당신의 기능을 추가 할 수 있습니다

또 다른 해킹 코드가 비동기 적으로로드되는 지역에 직접 인터페이스를 삽입하는 것입니다 거기에 정의 된 인터페이스. 다시 예에 관련

, 당신은 같은 것을 할 수 있어야한다 : 당신의 정의 콜백의 상단에

declare var __jquery : JQueryStatic; 

을; JQueryStatic에 대한 인터페이스를 확장하고 ///<reference path=...>을 사용하여 포함 시키면 원하는 마크 업이 작동합니다.