knockout.js - 内部モジュール内での Typescript 外部モジュールのインポート

私はTypeScriptに関連するいくつかの助けが必要で、内部モジュールで外部モジュールをどのように使うかについて知りたいです。

私はすべてのViewModelのコードロジックをViewModelの内部モジュールに保存したいです。

** HomePageViewModel.ts **

module ViewModels {
export class HomePageViewModel {
    constructor() {
        console.log('Creating HomePageViewModel');
    }

    public SayHello(): void {
        console.log('Hello from HomePageViewModel');
    }
}
}

** ビューモデルファクトリ **

public static CreateHomePageViewModel(): ViewModels.HomePageViewModel {
    return new ViewModels.HomePageViewModel();
} 

これは正しく動作しており、コンパイルも可能で、実行時もすべて正常に動作します。

さて、もし HomePageViewModel にインポートを追加したら（例えば knockout）

import ko = require('knockout');

TypeScriptはもはやコンパイルされません。ViewModelFactories のコードは Views の下で下線が引かれ、『Views のシンボルが見つかりません』と通知されます。

ViewModelモジュール内からknockoutモジュールにどのようにアクセスできますか？

回答 #1

基本的に、両方のモジュールタイプを混ぜることはできません。

別の外部モジュールを要求すると、あなたの内部モジュールはすぐに外部モジュールになってしまいます。knockoutには「内部的な」方法でアクセスする必要があります：開始するHTMLファイルで<script>としてインポートしてください（おそらく他のファイルでも同様に行っているでしょう）、そしてグローバル変数koを使用してください。

もう一つの解決策は、モジュールを外部化することです。

回答 #2

あなたは「knockout.d.ts」ファイル（またはそれに類似したもの）を「ko.xxxxxx」の定義と共に入手する必要があります。それはnugetやgithubから取得できます。その後、次のように書くことができるようになります。

var observable = ko.observable<number>(100);

あなたのTypeScriptコード内で。もちろん、ページに「knockout.x.x.x.js」ファイルを含める必要があります。

TypeScriptのドキュメントに記載されているように、namespaceを使用すべきかもしれません。

不必要な名前空間化

プログラムを内部モジュールから外部モジュールに変換している場合、このようなファイルになってしまうことがあります: shapes.ts

export module Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

ここでのトップレベルモジュール Shapes は理由もなく Triangle と Square をまとめています。これはモジュールの利用者である shapeConsumer.ts にとって混乱を招き、面倒です。

import shapes = require('./shapes');
var t = new shapes.Shapes.Triangle(); // shapes.Shapes?