TypeScript でインターフェースを別のファイルで宣言してインポートする方法

TypeScript で別のファイルでインターフェースを宣言してインポートする方法

TypeScript では、インターフェースを別のファイルで宣言し、他のファイルからインポートすることができます。これにより、コードをよりモジュール化し、保守しやすくなります。

手順

1. インターフェースを宣言するファイルを作成します。 このファイルには、インポートするインターフェースのみを定義します。他のコードは含めないでください。ファイル名は、インターフェースの名前を反映したものにするのが一般的です。

   例：person.ts

   export interface Person {
       name: string;
       age: number;
   }
   

2. インターフェースをエクスポートします。 export キーワードを使用して、インターフェースを他のファイルから利用できるようにします。

   例：

   export interface Person {
       name: string;
       age: number;
   }
   

3. インターフェースをインポートします。 インターフェースを使用するファイルで、import キーワードを使用して、インターフェースを宣言したファイルをインポートします。

   例：app.ts

   import { Person } from './person';
   
   const person: Person = {
       name: 'Taro Yamada',
       age: 30
   };
   
   console.log(person.name); // Taro Yamada
   

利点

• コードのモジュール化: インターフェースを別のファイルで宣言することで、コードをより整理し、特定の機能に関連するコードをまとめることができます。
• 保守性の向上: インターフェースを一度定義すれば、他のファイルからインポートして使用することができます。インターフェースを変更する場合は、1箇所を変更するだけで済みます。
• 再利用性: インターフェースは、複数のファイルで再利用することができます。これにより、コードの重複を減らし、開発効率を向上させることができます。

その他の注意事項

• インターフェースを宣言するファイルには、他のコードを含めないでください。そのファイルは、インターフェースのみを定義する専用のファイルである必要があります。
• インポートする際は、インターフェース名の後に中括弧 {} を記述する必要があります。
• インターフェースをデフォルトでエクスポートする場合は、export default interface Person {...} と記述することができます。

TypeScript で別のファイルでインターフェースを宣言してインポートするサンプルコード

person.ts ファイル

このファイルには、Person インターフェースのみを定義します。

export interface Person {
  name: string;
  age: number;
}

app.ts ファイル

このファイルで、person.ts ファイルから Person インターフェースをインポートし、使用します。

import { Person } from './person';

const person: Person = {
  name: 'Taro Yamada',
  age: 30
};

console.log(person.name); // Taro Yamada

実行

上記コードを実行すると、以下の出力がコンソールに表示されます。

Taro Yamada

説明

• person.ts ファイルでは、Person インターフェースを宣言し、export キーワードを使用してエクスポートします。
• app.ts ファイルでは、import キーワードを使用して person.ts ファイルから Person インターフェースをインポートします。
• person 変数に Person 型のオブジェクトを代入し、name プロパティと age プロパティに値を設定します。
• console.log ステートメントを使用して、person オブジェクトの name プロパティの値を出力します。

TypeScript で別のファイルでインターフェースを宣言してインポートするその他の方法

前述の方法に加えて、TypeScript で別のファイルでインターフェースを宣言してインポートするには、以下の方法もあります。

エイリアスを使用する

インポート時にエイリアスを使用すると、コードをより読みやすくすることができます。

import { Person as MyPerson } from './person';

const person: MyPerson = {
  name: 'Taro Yamada',
  age: 30
};

console.log(person.name); // Taro Yamada

デフォルトエクスポートを使用する

インターフェースをデフォルトでエクスポートすると、インポート時に中括弧 {} を省略することができます。

// person.ts
export default interface Person {
  name: string;
  age: number;
}

// app.ts
import Person from './person';

const person: Person = {
  name: 'Taro Yamada',
  age: 30
};

console.log(person.name); // Taro Yamada

ネームスペースを使用すると、複数のインターフェースを同じファイルに定義することができます。

// person.ts
export namespace Person {
  export interface IPerson {
    name: string;
    age: number;
  }

  export interface IAddress {
    street: string;
    city: string;
    country: string;
  }
}

// app.ts
import { Person } from './person';

const person: Person.IPerson = {
  name: 'Taro Yamada',
  age: 30
};

const address: Person.IAddress = {
  street: '123 Main Street',
  city: 'Anytown',
  country: 'USA'
};

console.log(person.name); // Taro Yamada
console.log(address.street); // 123 Main Street