TypeScriptでインターフェースをマージする：インターフェースの拡張、インターセクション型、Omit型とPick型

2024-04-02

TypeScriptで2つのインターフェースをマージする方法

インターフェースの拡張

最もシンプルで直感的な方法は、1つのインターフェースがもう1つのインターフェースを拡張するインターフェースの拡張です。

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

interface Employee extends Person {
  work: string;
}

const employee: Employee = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

この例では、EmployeeインターフェースはPersonインターフェースを拡張し、workプロパティを追加しています。

メリット:

シンプルで分かりやすい
コード量が少なく、保守しやすい

拡張できるインターフェースの数が限られる
複雑なインターフェース構造になると、コードの見通しが悪くなる

インターセクション型

複数のインターフェースを組み合わせて新しいインターフェースを作成するインターセクション型を使用できます。

type Person = {
  name: string;
  age: number;
};

type Employee = {
  work: string;
};

type FullProfile = Person & Employee;

const fullProfile: FullProfile = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

この例では、PersonとEmployeeインターフェースを組み合わせてFullProfileインターフェースを作成しています。

柔軟性が高い
複雑なインターフェース構造を表現できる

冗長なコードになりやすい
型エイリアスの名前が分かりにくくなる

Omit型とPick型

特定のプロパティのみをマージしたい場合は、Omit型とPick型を使用できます。

type Person = {
  name: string;
  age: number;
  work?: string; // オプション
};

type Employee = {
  work: string;
  department: string;
};

type PublicProfile = Omit<Person, 'work'> & Pick<Employee, 'work'>;

const publicProfile: PublicProfile = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

この例では、Personインターフェースからworkプロパティを除外하고、Employeeインターフェースからworkプロパティのみを選択してPublicProfileインターフェースを作成しています。

不要なプロパティを排除できる
コードを簡潔に保てる

上記の方法を参考に、目的に合った方法で2つのインターフェースをマージしましょう。それぞれのメリットとデメリットを理解し、コードの読みやすさや保守性を考慮することが重要です。

インターフェースの拡張

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

interface Employee extends Person {
  work: string;
}

const employee: Employee = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

console.log(employee.name); // 'Taro'
console.log(employee.age); // 30
console.log(employee.work); // 'Software Engineer'

インターセクション型

type Person = {
  name: string;
  age: number;
};

type Employee = {
  work: string;
};

type FullProfile = Person & Employee;

const fullProfile: FullProfile = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

console.log(fullProfile.name); // 'Taro'
console.log(fullProfile.age); // 30
console.log(fullProfile.work); // 'Software Engineer'

Omit型とPick型

type Person = {
  name: string;
  age: number;
  work?: string; // オプション
};

type Employee = {
  work: string;
  department: string;
};

type PublicProfile = Omit<Person, 'work'> & Pick<Employee, 'work'>;

const publicProfile: PublicProfile = {
  name: 'Taro',
  age: 30,
  work: 'Software Engineer',
};

console.log(publicProfile.name); // 'Taro'
console.log(publicProfile.age); // 30
console.log(publicProfile.work); // 'Software Engineer'

上記以外にも、Union型やPartial型など、さまざまな方法でインターフェースをマージすることができます。状況に合わせて最適な方法を選択してください。

2つのインターフェースをマージするその他の方法

マージ関数

独自の関数を作成して2つのインターフェースをマージすることができます。

function mergeInterfaces(first: any, second: any): any {
  const merged = {};
  for (const key in first) {
    merged[key] = first[key];
  }
  for (const key in second) {
    if (!merged.hasOwnProperty(key)) {
      merged[key] = second[key];
    }
  }
  return merged;
}

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

const employee: Employee = {
  work: 'Software Engineer',
  department: 'IT',
};

const fullProfile = mergeInterfaces(person, employee);

console.log(fullProfile.name); // 'Taro'
console.log(fullProfile.age); // 30
console.log(fullProfile.work); // 'Software Engineer'
console.log(fullProfile.department); // 'IT'

この例では、mergeInterfaces関数を作成して、2つのインターフェースのすべてのプロパティを1つのオブジェクトにマージしています。

ライブラリ

merge-interfacesなどのライブラリを使用して、インターフェースをマージすることができます。

import { mergeInterfaces } from 'merge-interfaces';

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

const employee: Employee = {
  work: 'Software Engineer',
  department: 'IT',
};

const fullProfile = mergeInterfaces(person, employee);

console.log(fullProfile.name); // 'Taro'
console.log(fullProfile.age); // 30
console.log(fullProfile.work); // 'Software Engineer'
console.log(fullProfile.department); // 'IT'