交差型を使ってTypeScriptをもっと使いこなす！アンパサンド(&) の詳細解説

TypeScript におけるアンパサンド(&) の意味

例：

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

type Student = Person & {
  studentId: number;
  major: string;
};

const student: Student = {
  name: "John Doe",
  age: 20,
  studentId: 12345,
  major: "Computer Science",
};

この例では、Student 型は Person 型と Student 型の交差型です。つまり、Student 型のオブジェクトは、Person 型のすべてのプロパティとStudent` 型の追加のプロパティ**を持つ必要があります。

アンパサンド(&) の利点

• コードの可読性: 型定義がより明確になり、コードを読みやすくします。
• コードの再利用性: 共通のプロパティを持つ複数の型を定義する際に、コードを再利用できます。
• 型安全性: 型チェックによって、型定義に違反するオブジェクトが作成されないことを保証します。

• 条件付き型
• ジェネリック型のパラメータとして
• 複数のインターフェースを組み合わせる

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

interface Address {
  street: string;
  city: string;
  state: string;
  postalCode: string;
}

interface Customer extends Person, Address {
  customerId: number;
  email: string;
}

const customer: Customer = {
  name: "John Doe",
  age: 20,
  street: "123 Main St",
  city: "Anytown",
  state: "CA",
  postalCode: "90210",
  customerId: 12345,
  email: "[email protected]",
};

この例では、Mix ジェネリック型を使用して、2つの型のすべてのプロパティを持つ新しい型を作成します。

type Mix<T, U> = {
  [P in keyof T | keyof U]: (T[P] & U[P]) extends never ? never : T[P] & U[P];
};

interface Document {
  id: string;
  title: string;
}

interface Timestamp {
  createdAt: Date;
  updatedAt: Date;
}

type DocumentWithTimestamp = Mix<Document, Timestamp>;

const documentWithTimestamp: DocumentWithTimestamp = {
  id: "12345",
  title: "My Document",
  createdAt: new Date(),
  updatedAt: new Date(),
};

例 3: 条件付き型

この例では、Partial 型を使用して、T 型のプロパティの一部またはすべてをオプションにする新しい型を作成します。

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

type NewUser = Partial<User> & { name: string };

const newUser: NewUser = {
  name: "John Doe",
};

TypeScript には、IntersectionTypes と Merge などのユーティリティ型が用意されています。これらのユーティリティ型を使用して、交差型を作成できます。

type IntersectionTypes<T, U> = {
  [P in keyof T | keyof U]: (T[P] & U[P]) extends never ? never : T[P] & U[P];
};

type Customer = IntersectionTypes<Person, Address>;

const customer: Customer = {
  name: "John Doe",
  age: 20,
  street: "123 Main St",
  city: "Anytown",
  state: "CA",
  postalCode: "90210",
  customerId: 12345,
  email: "[email protected]",
};

型エイリアスを使用する

型エイリアスを使用して、交差型を作成することもできます。

type Customer = Person & Address;

const customer: Customer = {
  name: "John Doe",
  age: 20,
  street: "123 Main St",
  city: "Anytown",
  state: "CA",
  postalCode: "90210",
  customerId: 12345,
  email: "[email protected]",
};

ジェネリック型を使用する

type Mix<T, U> = {
  [P in keyof T | keyof U]: (T[P] & U[P]) extends never ? never : T[P] & U[P];
};

type Customer = Mix<Person, Address>;

const customer: Customer = {
  name: "John Doe",
  age: 20,
  street: "123 Main St",
  city: "Anytown",
  state: "CA",
  postalCode: "90210",
  customerId: 12345,
  email: "[email protected]",
};

これらの方法はすべて、アンパサンド(&) を使用して交差型を作成するのと同じ結果を達成できます。使用する方法は、個人の好みや状況によって異なります。