TypeScript で名前空間を使用する方法

2 つ以上のコード コンポーネントが変数、関数、またはクラスに同じ名前を使用すると、名前の競合が発生します。多くの人が同じコードベースで作業する大規模なプロジェクトでは一般的です。どのコード コンポーネントがバグの原因であるかを判断するのが難しくなる可能性があります。

名前空間を使用すると、関連するコンポーネントのグループが共通の識別子の下にあるように、コードを編成および管理できます。これにより、名前の競合のリスクが軽減されます。

名前空間の作成

namespaceキーワードを使用して、TypeScript で名前空間を作成できます。名前空間に名前を付けるための識別子と、中かっこで囲まれたブロックを続けます。構文は、JavaScript でクラスを作成するために使用するものと似ています。

例えば：

namespace Example {}


次に、名前空間のメンバー (変数、関数、およびクラス) を名前空間ブロック内で宣言できます。

namespace Example {
  export function Foo(): void {
    console.log("This is a function inside the Example namespace");
  }


  export class Bar {
    property: string;

  export const baz = "This is a namespace variable"
}


上記の例では、Foo、Bar、およびbazがExample名前空間のメンバーです。デフォルトでは、同じ名前空間内の名前空間のメンバーにのみアクセスできます。exportキーワードを使用して、名前空間の各メンバーを外部からアクセスできるようにします。

ドット表記を使用して名前空間のメンバー名を呼び出すことにより、名前空間の公開されているすべてのメンバーにアクセスできます。

Example.foo(); // This is a function inside the Example namespace


const bar = new Example.Bar("string");
console.log(bar.property); // string

console.log(Example.baz); // This is a namespace variable


名前空間の入れ子

TypeScript では、名前空間を他の名前空間内にネストして、コードの階層構造を作成できます。名前空間をネストすると、関連する名前空間を共通の識別子でグループ化することにより、名前の衝突のリスクをさらに減らすことができます。

例えば：

namespace Example {
  export const property_1 = "Foo";


  export namespace Bar {
    export const printFoo = function () {
      console.log(property_1);
    };
  }

      constructor(property: string) {
        this.property = property;
      }
    }
  }
}


上記のコード ブロックは、ネストされた名前空間の例を示しています。Example名前空間は最上位の名前空間であり、Bar 名前空間と Baz 名前空間が含まれています。

作成した階層構造に従うドット表記を使用して、ネストされた名前空間のプロパティにアクセスできます。

例えば：

console.log(Example.property_1); // Foo
Example.Bar.printFoo() // Foo
const foo = new Example.Baz.Foo("example")


このコード例は、親名前空間を介して名前空間の各メンバーにアクセスします。親の名前空間ではなく、プロパティに直接アクセスすると、エラーがスローされます。

Example.printFoo()
// error TS2339: Property 'printFoo' does not exist on type 'typeof Example'


名前空間の入れ子はコードの整理に役立ちますが、深く入れ子になった名前空間は逆の効果をもたらす可能性があります。名前空間が深くネストされていると、コードの読み取りと保守が難しくなります。

名前空間エイリアス

名前空間エイリアスは、名前空間メンバーに付けられた短縮名であり、参照しやすくなっています。

importキーワードの後に​​エイリアスに割り当てる名前を指定すると、ネームスペース エイリアスを作成できます。次に、インポートキーワードとエイリアス名を名前空間メンバーに割り当てます。

例えば：

namespace Car {
  export namespace Tesla {
    export class ModelX {
      create(): String {
        return `Model X Created`
      }
    }
  }


  export namespace Toyota {
     export class Camry {}
  }

const modelX = new tesla.ModelX()
modelX.create() // Model X Created


この例では、Car.Tesla名前空間のエイリアスを作成します。このエイリアスを使用して、ModelX クラスなどのTesla名前空間のプロパティに簡単にアクセスできます。

複数のファイルで名前空間を使用する

別のファイルで名前空間を使用するには、それをインポートする必要があります。名前空間のインポートは、変数、関数、クラスなどのインポートとは異なります。プロジェクトのモジュール システムに応じて、requireまたはimportキーワードを使用してそれらをインポートできます。

ただし、名前空間をインポートできるのは、XML タグを含む 1 行のコメントであるトリプル スラッシュ ディレクティブを使用する場合のみです。

例えば：

// main.ts


/// <reference path="index.ts"/>
Example.foo()


この例では、 main.tsファイル内でトリプル スラッシュ ディレクティブを使用しています。ディレクティブは、 Example名前空間を含むindex.tsファイルを参照します。インポートしない場合、名前空間はそれを定義する同じファイル内でのみ使用できます。

index.tsファイルを参照すると、 Example名前空間と公開されているそのメンバーにアクセスできます。たとえば、 Example名前空間でfooメソッドを呼び出すことができます。

複数のファイルを使用したら、TypeScript が必要なすべてのコードをコンパイルしてロードすることを確認する必要があります。これを行うには、 outFileオプションを使用して TypeScript コンパイラからの出力を連結します。これにより、すべての入力ファイルが単一の JavaScript 出力ファイルにコンパイルされます。このようにコンパイラを実行するための一般的な構文は次のとおりです。

tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE>


<JAVASCRIPT_FILE>をターゲット JavaScript ファイルの名前に置き換えます。< TYPESCRIPT_FILE >を、トリプル スラッシュ ディレクティブを含む TypeScript ファイルの名前に置き換えます。

例えば：

tsc --outFile index.js main.ts


このコマンドは、main.tsファイルの内容と、トリプル スラッシュ ディレクティブによって参照されるすべてのファイルをindex.jsファイルにコンパイルします。

または、各ファイルを個別に指定できます。

tsc --outFile <JAVASCRIPT_FILE> <TYPESCRIPT_FILE_1> <TYPESCRIPT_FILE_2>


トリプル スラッシュ ディレクティブは、ファイルの先頭で宣言されている場合にのみ有効であることに注意してください。他の場所で使用しようとすると、TypeScript は特別な意味を持たない通常の 1 行のコメントとして扱います。

名前空間またはモジュールを使用する必要がありますか?

名前空間は非推奨ではありませんが、多くの場合、ES6 モジュールを使用してコードを整理および管理することをお勧めします。モジュールは保守と管理が簡単で、複数のファイルにまたがってスコープを設定できます。

さらに、ファイル レベルでのインポートとエクスポートに関して、モジュール間の関係を指定できます。名前空間は依存関係を定義できません。

最終的に、名前空間とモジュールのどちらを選択するかは、プロジェクト固有のニーズと要件によって決まります。どちらも TypeScript でコードを整理および管理するための価値ある方法を提供するからです。