web-dev-qa-db-ja.com

TypeScriptの複数のモジュールファイルにまたがる名前空間の使用

大規模なTypeScriptプロジェクトの作業を開始しました。

最初から、ファイルを整理しておく必要があります（このプロジェクトは多くの開発者の間で分割されるため、順序が非常に必要です）。

私はモジュール/名前空間を使用しようとし、クラスを名前空間を保持するフォルダとともに、それぞれに個別のファイルに分割しました。

ファイル構造は次のとおりです。

app.ts
\Classes
---- \Animals
---- ---- Mammals.ts
---- ---- Reptiles.ts

次に、import * as Animals from "./Classes/Animals"のようなものを使用して、app.tsのその名前空間にあるすべてのファイルをインポートしようとします。

名前空間ファイル自体については、次を試してみましたが、成功しませんでした。

namespace Animals {
    export class Mammals {
        constructor() {
        }
    }
}

また：

module Animals {
    export class Reptiles {
        constructor() {
        }
    }
}

残念ながら、パスは認識されません（単一のファイルではなくフォルダーを指すため）。これも可能ですか？ 1つのファイルにすべてのクラスを1つの名前空間から含めると、ファイルが数千行になり、このプロジェクトでは保守できなくなります。

また、TypeScript 1.5が tsconfig.json をサポートしていることにも気付きました。ただし、開発者がクラスを追加し始めるときに問題を引き起こす確実な方法は、各ファイルをマップに手動で追加する必要があることです。

注：Visual Studio 2015、TypeScript 1.5を使用しています（確認方法がわからない）。 ES6のサポートも有効にしています。

javascripttypescripttypescript1.5
31
aaron-bond

再エクスポートを使用して、他のモジュールのタイプをグループ化して公開する外部モジュールを作成します。

// Classes/Animals.ts
export * from '.\Animals\Mammals';
export * from '.\Animals\Reptiles';

次に、通常どおり、新しいモジュールからタイプをインポートします。

// app.ts
import * as Animals from '.\Classes\Animals'

let dog: Animals.Dog;
let snake: Animals.Snake;

または

// app.ts
import { Dog, Snake } from '.\Classes\Animals'

let dog: Dog;
let snake: Snake;
27
Vadim Macagon

名前空間キーワードではなく、目標を達成する方法を見つけました。

  1. 名前空間の下の「動物」クラス、Animal.ts＆Mammal.ts＆Reptile.ts。
  2. バレルのindex.tsを使用します。
  3. 名前空間グループ化のためのanimals.ts。

Animal namespace

サンプルクラス：

Classes

index.ts（バレルとして）

enter image description here

animals.ts（名前空間グループ化用）

enter image description here

そして、ここで名前空間の概念について説明します。

enter image description here

15
Val

外部モジュールは、ファイルごとにモジュールをロードすることを意味します。 AMDとCommonJSの両方に名前空間などはありません。何らかの後処理を使用して、1つのモジュールにファイルをバンドルできます。

以下は内部モジュールを定義しています：

module Animals {
    export class Reptiles {
        constructor() {
        }
    }
}

importを使用しないでください。 Animals.Reptilesはどこにでも表示されます。唯一の目的は、適切な順序でスクリプトをロードすることです（たとえば、継承者の前の基本クラス）。したがって、ts.configまたはその他の場所にあるすべてのファイルをリストする必要があります。私のプロジェクトでは、フォルダーにバンドルを使用し、@を基本クラスのファイル名に追加する規則があります。

別の解決策は、外部モジュールを使用することです：AMD（ RequireJS ）またはCommonJS（ Browserify ）。その場合、上位レベルmoduleを宣言から削除します。 1つのファイルに1つのタイプのみが含まれる場合、ルートとしてエクスポートできます。

class Reptiles {
    constructor() {
    }
}

export = Reptiles;

ファイルパスでモジュールを参照できます。

import Reptilies = require('..\Animals\Reptilies')
var  reptile = new Reptile();

または、新しいES6モジュールの場合：

export class Reptiles {
    constructor() {
    }
}

import { Reptiles } from '..\Animals\Reptilies';
1
Artem

名前空間を単独で使用してこれを行う方法はないようです（ Module Augmentation およびdeclareを使用して、新しいアイテムを個別に追加する場合を除きます）。ただし、名前空間はクラスの一部であり、拡張することができます！これは私が見つけることができる最高の選択肢です：

CoreLibraryTypes.ts

abstract class Types { }
namespace Types { 
    export class TypeA { }
    export class TypeB { }
    export class TypeC { }
}
export { Types };

CoreTypesExtended.ts

import CoreLibraryTypes from "./CoreLibraryTypes";

abstract class Types extends CoreLibraryTypes { }
namespace Types { 
    export class TypeD { }
    export class TypeE { }
    export class TypeF { }
}
export { Types };

もちろん、欠点は、2番目のモジュールのインポートのみに新しいタイプが追加されることです。最初のモジュールは以前のままです。理想的には、（プラグインからのように）追加の型で型の名前空間を「更新」して、モジュールの拡張がより自然にサポートされるように（手作業で記述するのではなく）ニースだろうが、誰かが更新された定義を手動で宣言することでモジュールの拡張を実現することは、名前空間がすでに行っていることを行うための半分の$$の方法にすぎないことを理解しています（上記のように、クラスの一部として既に名前空間のマージを使用できるクラスを含む）。 ;）

注：上記の例では、export { Types };理由-これにより、他の人が私のモジュールを増強できるようになります。デフォルトのエクスポートでは、拡張機能はサポートされていません（それが必要な場合を除き、仮想的にシールします）。

0
James Wilkins