型エイリアスとインターフェース

次のレッスンへようこそ！このレッスンでは、TypeScript の型エイリアスとインターフェースについて、それぞれの違いや共通点、使い分けを学びます。さっそく始めましょう！

型エイリアスとは

型エイリアスを使うと、型にカスタム名を定義できます。プリミティブ型、オブジェクト、さらには関数シグネチャも表現できます。

例：

課題： 本を表すオブジェクトの型エイリアスを作成し、それを使って変数を定義してください。

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

インターフェースとは

インターフェースは、プロパティやメソッドを含むオブジェクトの構造を定義します。オブジェクトの一貫性と型安全性を確保するためによく使用されます。

例：

課題： ユーザープロフィール用のインターフェースを作成し、それを使って変数を定義してください。

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

型エイリアスとインターフェース：共通点

型エイリアスとインターフェースには、次のような共通点があります：

• どちらもオブジェクトの構造を記述できます。
• どちらも関数型の定義に使用できます。
• どちらも他の型の拡張をサポートしています。

例： 関数型：

課題： 関数について型エイリアスとインターフェースをそれぞれ定義し、それらを使用してください。

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

型エイリアスとインターフェース：違い

主な違いは次のとおりです：

• インターフェース： マージできます（宣言マージ）。
• 型エイリアス： マージできません。
• 型エイリアス： ユニオン型とインターセクション型を定義できます。
• インターフェース： 主にオブジェクトの構造を定義するために設計されています。

例： 型エイリアスを使ったユニオン型：

課題： 型エイリアスを使ってユニオン型を定義し、変数に異なる値を代入してください。

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

型とインターフェースの拡張

型エイリアスとインターフェースは、どちらも他の型を拡張できます：

• インターフェース： extends キーワードを使用します。
• 型エイリアス： インターセクション（&）を使用します。

例：

課題： 型エイリアスとインターフェースを拡張して、新しい型を作成してください。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

宣言マージ

インターフェースは宣言マージをサポートしています。これは、同じ名前を持つ複数のインターフェース宣言を1つにマージする機能です。型エイリアスはこの機能をサポートしていません。

例：

課題： 同じ名前を持つインターフェース宣言を2つ作成し、宣言マージを確認してください。

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

使い分け

次のガイドラインを参考にしてください：

• オブジェクトの構造を定義する場合や、宣言マージが必要な場合は、インターフェースを使用します。
• ユニオン、インターセクション、または関数型を定義する場合は、型エイリアスを使用します。

ヒント： 明確さと一貫性のため、用途に最も適した方を使用してください！

よくできました！

おめでとうございます！TypeScript における型エイリアスとインターフェースの共通点と違い、さらにそれぞれの使い分けについて学びました。次のレッスンでは、条件付き型などの TypeScript の高度な機能について学びます。この調子でコーディングを続けましょう！