見出し画像

#025　TypeScript（10）：オブジェクトへの型指定

KINO↓

TypeScriptでオブジェクトに型をつける方法

大きく分けて３つ

  1. インラインで型を定義する

  2. インターフェースを使用する

  3. 型エイリアスを使用する

インラインで型を定義する

オブジェクトの型をその場で定義する方法です。
オブジェクトのプロパティの型を直接書きます。

メリット: 簡単にその場で型を定義できます。
デメリット: 再利用が難しい。

const personInline: { name: string; age: number } = {
    name: "田中",
    age: 30
};
console.log("インラインで型を定義:", personInline);


インターフェースを使用する

'interface' キーワードを使って、オブジェクトの型を別に定義します。
複数の場所で同じ型を再利用できます。

メリット: 型を再利用しやすく、コードが整理されます。
デメリット: インターフェースの定義が必要。

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

const personInterface: PersonInterface = {
    name: "鈴木",
    age: 40
};
console.log("インターフェースを使用:", personInterface);


型エイリアスを使用する

'type' キーワードを使って、オブジェクトの型を別に定義します。
複数の場所で同じ型を再利用できますが、'type'を使って定義します。

メリット: 型を再利用しやすく、コードが整理されます。
デメリット: 型エイリアスの定義が必要。

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

const personTypeAlias: PersonTypeAlias = {
    name: "西田",
    age: 50
};
console.log("型エイリアスを使用:", personTypeAlias);


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

インターフェース (interface)

  • 目的: 主にオブジェクトの構造を定義するために使われます。

  • 再オープン: 同じ名前のインターフェースを複数回定義すると、それらが自動的にマージされます。これにより、後からプロパティを追加することができます。

  • 拡張: 他のインターフェースを拡張（extends）して、新しいインターフェースを作成できます。


型エイリアス (type)

  • 目的: より柔軟に、さまざまな型を定義するために使われます。オブジェクトの型だけでなく、ユニオン型、タプル型、その他の型にも使用できます。

  • 再オープン: 型エイリアスは再オープン（追加定義）ができません。1度定義したら変更できません。

  • 拡張: 型エイリアスは直接的には拡張（extends）できませんが、交差型（&）を使って他の型を組み合わせることができます。

// インターフェース (interface)
// 目的: 主にオブジェクトの構造を定義するために使われます。
// 再オープン: 同じ名前のインターフェースを複数回定義すると、それらが自動的にマージされます。これにより、後からプロパティを追加することができます。
// 拡張: 他のインターフェースを拡張（extends）して、新しいインターフェースを作成できます。
// 使用例:
interface PersonInterface {
    name: string;
    age: number;
}

interface EmployeeInterface extends PersonInterface {
    salary: number;
}

const employee2: EmployeeInterface = {
    name: "田中",
    age: 30,
    salary: 5000
};



// 型エイリアス (type)
// 目的: より柔軟に、さまざまな型を定義するために使われます。
// オブジェクトの型だけでなく、ユニオン型、タプル型、その他の型にも使用できます。
// 再オープン: 型エイリアスは再オープン（追加定義）ができません。1度定義したら変更できません。
// 拡張: 型エイリアスは直接的には拡張（extends）できませんが、
// 交差型（&）を使って他の型を組み合わせることができます。
// 使用例:
type PersonType = {
    name: string;
    age: number;
};

type EmployeeType = PersonType & {
    salary: number;
};

const employee3: EmployeeType = {
    name: "鈴木",
    age: 40,
    salary: 7000
};

console.log("インターフェース:", employee2);
console.log("型エイリアス:", employee3);

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

いいなと思ったら応援しよう！