4

クライアント側でangularjsでtypescriptを使用しようとしています。

外部モジュールを使用すると、生成されたjsがブラウザーで実行されないことがわかりました。

controllers.ts

/// <reference path="./libs/underscore.d.ts"/>

import _ = module("underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

生成されるjsは次のようになります。

var _ = require("underscore")
var test;
(function (test) {
    var Ctrl = (function () {
        function Ctrl($scope) {
            $scope.name = "Freewind";
            _.each($scope.name, function (item) {
            });
        }
        return Ctrl;
    })();
    test.Ctrl = Ctrl;    
})(test || (test = {}));

正しく実行できません。でも、module("underscore")パーツを外せば大丈夫です。

require()HTMLにunderscore.jsを追加したので、メソッドに何か問題があるはずだと思います。それを修正する方法は？

4

2 に答える 2

5

HTMLページにデータをロードする方法は2つあります。

バンドル

1つ目は、ページにすべてのスクリプトファイルを手動で含めることです。ある種のプレリリースステップを実行してコードをマージおよび縮小することもできますが、コードに任せるのではなく、その責任を負います。これは一般にバンドリングと呼ばれます。

バンドルの場合、次のように、TypeScriptコードで参照のみを使用します（インポートは使用しません）。

/// <reference path="./libs/underscore.d.ts"/>

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

モジュールのロード

モジュールローダー（Webの場合は通常RequireJS）を使用する場合は、importステートメントを使用して外部モジュールをロードできます。通常、この場合は参照は必要ありません...

import _ = module("./libs/underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

モジュール以外のRequireJS

3番目のシナリオがありますが、これは非常に一般的です。外部モジュールではないもの（jQueryなどですが、アンダースコアもこのパターンに適合する場合があります）をインポートする場合は、RequireJSへの参照と手動呼び出しを使用することをお勧めします。

RequireJSは依存関係をロードするので、メインプログラムをそれでラップします（おそらく、などの別のファイルにありますapp.ts。

///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

require(['underscore'], function (_) {
    var ctrl = new test.Crtl({});
});

require.configまた、アプリケーションでアンダースコアを付けるパスを指定するために使用することもできます。

  require.config({
    paths: {
        "underscore": "libs/underscore"
    }
  });
于 2013-01-28T11:17:48.280 に答える
1

require を使用すると、アンダースコアがロード可能なモジュールとしてエクスポートされると主張します。これはさらに、ある種のモジュール ローダー システムを使用していることを前提としています (TypeScript は現在、AMD および CommonJS モジュールをサポートしています)。モジュール システムを使用しておらず、アンダースコアは単にグローバル スコープで使用できるため、 /// 参照を使用して、アンダースコアがグローバル スコープで使用可能であることを TypeScript に伝えることができます。ファイルの先頭に次を追加します。

/// <reference path="./libs/underscore.d.ts">

そして、あなたは行く準備ができているはずです！

于 2013-01-26T19:51:41.177 に答える