TypeScript でオブジェクトをインターフェースにキャストする方法：完全ガイド

2024-04-12

TypeScript でオブジェクトをインターフェースにキャストする方法

オブジェクトをインターフェースにキャストするには、以下の2つの方法があります。

アサーション構文は、コンパイラに対して、ある式が特定の型であることを保証する方法です。オブジェクトをインターフェースにキャストするには、次の構文を使用します。

const obj: MyInterface = <MyInterface>someObject;

この例では、someObject というオブジェクトを MyInterface というインターフェースにキャストしています。コンパイラは、someObject が MyInterface で定義されたすべてのプロパティとメソッドを持っていることを確認します。そうでない場合は、コンパイルエラーが発生します。

as キーワードは、オブジェクトを別の型に明示的に変換する方法です。オブジェクトをインターフェースにキャストするには、次の構文を使用します。

const obj = someObject as MyInterface;

一般的に、アサーション構文を使用する方が好ましいです。これは、コンパイラが型違反を検出して、コードの潜在的な問題を早期に発見できるためです。ただし、as キーワードを使用する必要がある場合もあります。たとえば、オブジェクトがインターフェースの一部のみを実装している場合、as キーワードを使用して、必要なプロパティとメソッドのみをアクセスできるようにすることができます。

例

次の例では、Person というインターフェースと、そのインターフェースを実装する Employee クラスを示します。

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

class Employee implements Person {
  name: string;
  age: number;
  department: string;
}

このコードでは、Employee オブジェクトを Person インターフェースにキャストする方法を 2 通り示します。

const employee: Employee = new Employee();
const person1: Person = <Person>employee; // アサーション構文を使用する
const person2: Person = employee as Person; // `as` キーワードを使用する

どちらの方法でも、person1 と person2 は Person 型の変数になります。

この例では、Employee クラスは Person インターフェースで定義されたすべてのプロパティとメソッドを持っているため、どちらの方法を使用しても問題ありません。ただし、Employee クラスが Person インターフェースの一部のみを実装している場合は、as キーワードを使用する必要があることに注意してください。

例 1: アサーション構文を使用する

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

class Employee implements Person {
  name: string;
  age: number;
  department: string;
}

const employee: Employee = new Employee();
const person1: Person = <Person>employee; // アサーション構文を使用する

console.log(person1.name); // "John Doe"
console.log(person1.age); // 30

このコードでは、Employee オブジェクトを Person インターフェースにキャストしています。コンパイラは、employee が Person で定義されたすべてのプロパティとメソッドを持っていることを確認します。

例 2: as キーワードを使用する

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

class Employee implements Person {
  name: string;
  age: number;
  department: string;
}

const employee: Employee = new Employee();
const person2: Person = employee as Person; // `as` キーワードを使用する

console.log(person2.name); // "John Doe"
console.log(person2.age); // 30

例 3: オブジェクトの一部のみを実装するクラス

interface Person {
  name: string;
  age: number;
  address: string; // このプロパティは `Employee` クラスで実装されていない
}

class Employee implements Person {
  name: string;
  age: number;
  department: string;
}

const employee: Employee = new Employee();
const person: Person = employee as Person; // `as` キーワードを使用する

console.log(person.name); // "John Doe"
console.log(person.age); // 30

// 次の行はエラーになります:
console.log(person.address); // エラー: 'address' は 'Person' 型に定義されていません

このコードでは、Employee クラスは Person インターフェースで定義されたすべてのプロパティとメソッドを持っているわけではありません。そのため、as キーワードを使用する必要があります。ただし、person 変数を使用してアクセスできるのは、Employee クラスで実装されたプロパティとメソッドのみです。

TypeScript でオブジェクトをインターフェースにキャストするその他の方法

ジェネリック型を使用して、インターフェースの型を動的に指定することができます。これにより、オブジェクトを明示的にキャストする必要がなくなります。

interface Person<T> {
  name: string;
  age: number;
  data: T;
}

class Employee implements Person<string> {
  name: string;
  age: number;
  department: string;
  data: string;
}

const employee: Employee = new Employee();
const person: Person<string> = employee; // ジェネリック型を使用するため、明示的なキャストは不要

console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.data); // "Employee Data"

この例では、Person というジェネリック型インターフェースを定義しています。このインターフェースは、data というプロパティを持つことができますが、このプロパティの型はジェネリック型パラメータ T で指定されます。Employee クラスは Person<string> 型のジェネリック型を使用して、data プロパティの型を string に指定します。

型推論を使用する

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

const employee: Employee = {
  name: "John Doe",
  age: 30
};

const person = employee; // 型推論を使用するため、明示的なキャストは不要

console.log(person.name); // "John Doe"
console.log(person.age); // 30

この例では、employee オブジェクトを明示的にキャストせずに Person 型の変数 person に割り当てています。これは、TypeScript の型推論機能が、employee オブジェクトの型が Person インターフェースと一致することを検出するためです。

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

function isPerson(obj: any): obj is Person {
  return typeof obj.name === "string" && typeof obj.age === "number";
}

const employee: Employee = {
  name: "John Doe",
  age: 30
};

const person: Person | undefined = isPerson(employee) ? employee : undefined;

if (person) {
  console.log(person.name); // "John Doe"
  console.log(person.age); // 30
}

この例では、isPerson という関数を使用して、オブジェクトが Person インターフェースを実装しているかどうかを確認しています。この関数は、obj.name が文字列型で、obj.age が数値型であるかどうかを確認します。employee オブジェクトが Person インターフェースを実装していることが検出された場合、person 変数に割り当てられます。

注意点

ジェネリック型、型推論、および型ガードを使用する場合は、コードが複雑になり、理解しにくくなる可能性があることに注意することが重要です。これらの方法を使用する前に、アサーション構文または as キーワードを使用する方が適切かどうかを検討してください。

TypeScript でオブジェクトをインターフェースにキャストするには、さまざまな方法があります。最善の方法は、特定の状況によって異なります。一般的に、アサーション構文または as キーワードを使用するのが最良の方法ですが、ジェネリック型、型推論、または型ガードを使用する方が適切な場合もあります。

object typescript interface