web-dev-qa-db-ja.com

amdで使用するアンビエント定義のみを使用してTypeScriptモジュールをインポートします

Backboneに依存するモジュールがあります。私はbackbone.d.ts定義を持っていますが、TypeScriptは、私のモジュールをコンパイルしない限り、モジュールをコンパイルしたくないようです。

import Backbone = module("backbone")

実際には、定義ファイルではなく、有効なバックボーンモジュールを指しています。 AMDがロードされたモジュールを使用しており、バックボーンにrequirejsシムが定義されています。

電話のbackbone.tsモジュール定義を作成する以外に回避策はありますか？

更新：ソリューションの副作用は、モジュールが存在しなくなったため、このようなコードが機能しなくなることです。 requirejsシムのために存在する必要があります。私が知っている唯一の回避策は、2つの.d.tsファイルを用意することです。 1つは、バックボーンをインポートとして使用し、declare moduleビットを含まないファイル用です。もう1つは、/// <reference行を含むdeclare moduleを使用するためのものです。

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

interface IApi {
    version: number;
    Events: Backbone.Events;
}
javascriptrequirejstypescriptamd
16
ryan

TypeScript言語は、この最初の回答からかなり変更されています。

たとえば、外部モジュールをインポートするには、requireを使用します（私の元の回答には古いmoduleキーワードが含まれていました）。

これは、バックボーンをインポートするための一般的な使用例です-DefinitelyTypedからの型情報を使用します。

_/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');
_

タイプ定義内で、バックボーンモジュールが宣言されます。これにより、インポートが有効になります。

_//... lots of code and then...

declare module "backbone" {
    export = Backbone;
}
_

したがって、元の質問は次を使用して解決できます...

_/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}
_

このコード例では、これが必要なすべてです-しかし、多くの場合、実行時にバックボーンライブラリをロードする必要があります...（公式に実験的な）_AMD-dependency_コメントを使用して、生成されたdefine関数呼び出しに含めることができます背骨。

_/// <reference path="scripts/typings/backbone/backbone.d.ts" />
/// <AMD-dependency path="backbone" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}
_
9
Fenton

[〜＃〜] amd [〜＃〜] in TypeScript を処理する別の方法が実際にあります：

  1. クローンを作成する DefinitelyTyped Githubリポジトリ。これには、_jquery.d.ts_、_backbone.d.ts_、およびその他の多くの定義ファイルが含まれています。

  2. 定義ファイルを_myfile.ts_ファイルにリンクします。
    _/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />_
    _/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />_

  3. AMDの依存関係をjavascriptライブラリに追加します。
    _/// <AMD-dependency path="jquery"/>_

  4. _$_ファイル内で_myfile.ts_を使用するには、requireを呼び出すことができます。
    var $ = require("jquery");

_myfile.ts_のフルバージョン：

_/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />
/// <AMD-dependency path="jquery"/>
var $ = require("jquery");

export function helloWorld() {
  $("<div>Hello World</div").appendTo(document.body);
}
_

_tsc --module AMD myfile.ts_を実行すると、次のjavascriptコードが得られます。

_define(["require", "exports", "jquery"], function(require, exports) {
    var $ = require("jquery");

    function helloWorld() {
        $("<div>Hello World</div").appendTo(document.body);
    }
    exports.helloWorld = helloWorld;
});
_
7
jantimon