web-dev-qa-db-ja.com

タイプスクリプトでrequireJSを使用する正しい方法は何ですか？

私が見つけた例 here と here はmodule（）を使用するように言っています。しかし、コンパイルすると「警告TS7021： 'module（...）'は推奨されません。代わりに 'require（...）'を使用してください」というメッセージが表示されます。

それで、いくつかの基本的な質問：

  1. TypeScriptとrequireJSを使用する場合、requireJSが2番目のファイルをロードし、最初のファイルのクラスを与える別の.tsファイルから1つの.tsファイルのクラスにアクセスするにはどうすればよいですか？
  2. 最上部のdefine（）が2番目のtsファイルをロードし、最後にビルドしたオブジェクトを返す2つの.tsファイルで標準のrequireJSアプローチを行う方法はありますか？
  3. 質問＃2と同じソート。 Javaスクリプトファイルから、typeスクリプトファイルでdefine（）コンストラクトを使用して、インスタンス化されたオブジェクトを取得できますか？もしそうなら、どのように？

Update：以下は、TSCコンパイルエラーを示しています。

///<reference path='../../libs/ExtJS-4.2.0.d.ts' />
///<reference path='../../libs/require.d.ts' />

import fdm = require("./file-definitions");
require(["../../scripts/ribbon"], function () {

export module Menu {

    export class MainMenu {
requirejstypescript
27
David Thielen

私は、basaratの答えに対するDavidの回答（モジュールとクラスに関して）にコメントしたでしょうが、評判はありません。私はこの質問が古いことを知っていますが、他の場所で答えを見つけませんでした。

私はbasaratのビデオを他のリソースと組み合わせて使用​​し、David Thielenが必要とするクラスを見つけ出すことに成功しました。 tsソースファイルのエントリはなくなりましたが、AMD依存関係とインポートステートメントはあります。 EclipseでpalantirのTSプラグインを使用すると、コード補完と使用法から定義にジャンプする機能は、AMD依存関係とインポートステートメントだけで機能します。ヘッダーファイルは、展開とは関係なく、TSコンパイラでのみ使用されるため、ステートメントが必要です。また、.tsファイル拡張子は参照ステートメントに使用されますが、AMDおよびインポートステートメントには使用されないことに注意してください。

Utils.tsには次のものがあります。

///<reference path="headers/require.d.ts" />

export function getTime(){
    var now = new Date();
    return now.getHours()+":"+now.getMinutes()+':'+now.getSeconds();
}

OntologyRenderScalerには次のものがあります。

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<AMD-dependency path="Utils" />

import Utils = require('./Utils');

export class OntologyRenderScaler {
...
Utils.getTime();
...
}

OntologyMappingOverview.tsには次のものがあります。

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<AMD-dependency path="Utils" />
///<AMD-dependency path="OntologyGraph" />
///<AMD-dependency path="OntologyFilterSliders" />
///<AMD-dependency path="FetchFromApi" />
///<AMD-dependency path="OntologyRenderScaler" />
///<AMD-dependency path="GraphView" />

///<AMD-dependency path="JQueryExtension" />

import Utils = require('./Utils');
import OntologyGraph = require('./OntologyGraph');
import OntologyRenderScaler = require('./OntologyRenderScaler');
import OntologyFilterSliders = require('./OntologyFilterSliders');
import GraphView = require('./GraphView');

export class OntologyMappingOverview extends GraphView.BaseGraphView implements GraphView.GraphView {
    ontologyGraph: OntologyGraph.OntologyGraph;
    renderScaler: OntologyRenderScaler.OntologyRenderScaler;
    filterSliders: OntologyFilterSliders.MappingRangeSliders;
...
this.renderScaler = new OntologyRenderScaler.OntologyRenderScaler(this.vis);
...
}

上記のcodeBeltのように動作させることはできませんでしたが、彼のブログで行ったやり取りでは、（ファイルの下部にMyClassをエクスポートして）彼のアプローチを動作させると、インポートされた識別子をクラス名で2倍にする必要があります。定義されている名前空間（暗黙的な外部モジュール、つまりTypeScriptファイル名）ではなく、目的のクラスをエクスポートすると思います。

12
Eric

ために ：

TypeScriptとrequireJSを使用する場合、requireJSが2番目のファイルをロードし、最初のファイルのクラスを与える別の.tsファイルから1つの.tsファイルのクラスにアクセスするにはどうすればよいですか？最上部のdefine（）が2番目のtsファイルをロードし、最後にビルドしたオブジェクトを返す2つの.tsファイルで標準のrequireJSアプローチを行う方法はありますか？

単に：

// from file a.ts
export class Foo{

}

// from file b.ts
// import 
import aFile = require('a')
// use: 
var bar = new aFile.Foo();

--module AMDフラグを使用して両方のファイルをコンパイルします。

ために ：

質問＃2と同じソート。 Javaスクリプトファイルから、タイプスクリプトファイルでdefine（）コンストラクトを使用して、インスタンス化されたオブジェクトを取得できますか？

b.jsからa.tsを使用するには：

// import as a dependency:
define(["require", "exports", 'a'], function(require, exports, aFile) {

    // use:
    var bar = new aFile.Foo();
});

これはb.tsをコンパイルした場合に得られるものに似ています

6
basarat

作成するクラスの下にexportステートメントが必要です。

// Base.ts
class Base {

    constructor() {
    }

    public createChildren():void {

    }
}

export = Base;

次に、別のクラスにインポートして使用するには、次のようにします。

// TestApp.ts
import Base = require("view/Base");

class TestApp extends Base {

    private _title:string = 'TypeScript AMD Boilerplate';

    constructor() {
        super();
    }

    public createChildren():void {

    }
}

export = TestApp;

サンプルコードは http://www.codebelt.com/TypeScript/typescript-internal-and-external-modules/ で確認できます。

4
codeBelt

私はTypeScriptを使って、既存のjavascript/requirejsプロジェクトに統合しようとしています。セットアップとして、v 0.9.1.1用のTypeScriptを備えたVisual Studio 2013があります。 TypeScriptは、（Visual Studioで）モジュールをAMD形式でコンパイルするように構成されています。

これは私のために仕事を見つけたものです（もちろんより良い方法があるかもしれません）

  1. AMD-dependencyを使用 TypeScriptコンパイラに、ロードする必要のあるコンポーネントのリストに必要なモジュールを追加するよう指示します
  2. エクスポートされているクラスのコンストラクターで、requirejsのrequire関数を使用して、インポートされたモジュールを実際にフェッチします（この時点では、これは前のステップのため同期です）。これを行うには、reference require.d.tsを実行する必要があります

補足説明として、TypeScriptに不可欠な私の見解であり、頭痛の種であるため、この例では、インターフェイスを使用するクラスをエクスポートする2つの方法を示します。インターフェイスの問題は、タイプチェックに使用されるが、実際の出力が生成されないこと（生成された.jsファイルが空）であり、「プライベートクラスのエクスポート」タイプの問題を引き起こすことです。インターフェイスを実装するクラスをエクスポートする：

  1. （Logger.tsファイルにあるように）インターフェースにAMD依存関係を追加し、クラスの新しいインスタンスを保持する型付き変数をエクスポートします。エクスポートされたクラスは直接使用できます（つまり、myClass.log（ 'hello'））
  2. （Import.tsファイルにあるように）インターフェイスにAMD-依存関係を追加しないでください。そして、クラスの新しいインスタンスを保持するany型の変数を返す関数（すなわちInstantiate（））をエクスポートします。この関数を介して消費されます（つまり、myClass.instantiate（）。log（ 'hello'））

最初のオプションの方が優れているようです。インスタンス化関数を呼び出す必要はなく、さらに、型付きクラスを使用して作業する必要があります。欠点は、[空の]インターフェースのjavascriptファイルがブラウザーに移動することです（ただし、それはとにかくそこにキャッシュされ、多分あなたは縮小を使用しているかもしれません。

次のコードブロックには、Requires（AMD）でロードされる2つのTypeScriptモジュールがあります。LoggerとImportです。

ILogger.tsファイル

interface ILogger {
    log(what: string): void;
}

Logger.tsファイル

///<reference path="./ILogger.ts"/>

//this dependency required, otherwise compiler complaints of private type being exported
///<AMD-dependency path="./ILogger"/>

class Logger implements ILogger {
        formatOutput = function (text) {
            return new Date() + '.' + new Date().getMilliseconds() + ': ' + text;
        };

        log = function (what) {
            try {
                window.console.log(this.formatOutput(what));
            } catch (e) {
                ;
            }
        };
}

//this approach requires the AMD-dependency above for the interafce
var exportLogger: ILogger = new Logger();
export = exportLogger;

別のtsファイル（Import.ts）でLogger.tsを使用する

///<reference path="../../../ext/definitions/require.d.ts"/>

///<AMD-dependency path="Shared/Logger"/>
///<AMD-dependency path="./IImport"/>

class _Import implements IImport{
    ko: any;
    loggerClass: ILogger;

    constructor() {
        this.ko = require('knockout');//require coming from require.d.ts (in external_references.ts)
        this.loggerClass = require('Shared/Logger');
    }

    init(vm: any) {
        this.loggerClass.log('UMF import instantiated...');
    }
}

////Alternative Approach:
////this approach does not require adding ///<AMD-dependency path="./IImport"/>
////this can be consumed as <imported_module_name>.instantiate().init();
//export function instantiate() {
//    var r : any = new _Import();// :any  required to get around the private type export error
//    return r;
//}

//this module can be consumed as <imported_module_name>.init();
var exported: IImport = new _Import();
export = exported;

IImport.tsファイル

interface IImport {
    init(vm: any): void;
}

インポートモジュールをjavascriptから直接使用するには、次のようなものを使用してください（私はこれを試したことはありませんが、動作するはずです）

define (['Import'], function (import)
{
    //approach 1
    import.init();

    ////approach 2
    //import.instantiate().init();
});
2
Leo