インターフェースマスターへの道！ TypeScript インターフェースの深い理解

2024-04-02

TypeScriptにおけるインターフェースのインポートとエクスポート

インターフェースのエクスポート

インターフェースを他のモジュールで使用できるようにするには、エクスポートする必要があります。インターフェースの前にexportキーワードを追加することで、インターフェースをデフォルトでエクスポートできます。

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

インターフェースのインポート

他のモジュールで定義されたインターフェースを使用するには、importキーワードを使ってインポートする必要があります。

import { User } from './user';

const user: User = {
  name: 'John Doe',
  age: 30,
};

上記の場合、./userモジュールからUserインターフェースがインポートされています。

インターフェースのエイリアス

インポート時にインターフェースにエイリアスを設定することもできます。

import { User as Person } from './user';

const person: Person = {
  name: 'Jane Doe',
  age: 25,
};

上記の場合、UserインターフェースはPersonというエイリアスでインポートされています。

インターフェースはexportキーワードを使ってエクスポートできます。

ファイル user.ts

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

export function createUser(name: string, age: number): User {
  return {
    name,
    age,
  };
}

ファイル index.ts

import { User, createUser } from './user';

const user = createUser('John Doe', 30);

console.log(user.name); // 'John Doe'
console.log(user.age); // 30

別の書き方

以下のコードは、上記のコードと同じ機能を実現しますが、exportキーワードの書き方が異なります。

// user.ts

interface User {
  name: string;
  age: number;
}

function createUser(name: string, age: number): User {
  return {
    name,
    age,
  };
}

export { User, createUser };

// index.ts

import { User, createUser } from './user';

const user = createUser('John Doe', 30);

console.log(user.name); // 'John Doe'
console.log(user.age); // 30

この書き方では、UserインターフェースとcreateUser関数を個別にエクスポートしています。

インターフェースを個別にエクスポートすることもできます。

インターフェースのインポートとエクスポートのその他の方法

ネイムスペース

// user.ts

export namespace User {
  export interface User {
    name: string;
    age: number;
  }

  export function createUser(name: string, age: number): User {
    return {
      name,
      age,
    };
  }
}

// index.ts

import { User } from './user';

const user = User.createUser('John Doe', 30);

console.log(user.name); // 'John Doe'
console.log(user.age); // 30

デフォルトエクスポート

インターフェースをデフォルトエクスポートすると、インポート時に名前を付ける必要がありません。

// user.ts

export default interface User {
  name: string;
  age: number;
}

export function createUser(name: string, age: number): User {
  return {
    name,
    age,
  };
}

// index.ts

import user from './user';

const user = user.createUser('John Doe', 30);

console.log(user.name); // 'John Doe'
console.log(user.age); // 30