TypeScriptのオブジェクト型を完全解説！基本から応用まで

TypeScriptは、JavaScriptに型安全性を加えることで、より堅牢なコードを書くことができる言語です。

その中でも「オブジェクト型」は、複雑なデータ構造を扱う際に欠かせない重要な要素です。

本記事では、

「TypeScriptのオブジェクト型を完全解説！基本から応用まで」

と題して、TypeScriptのオブジェクト型の基本から応用までを詳しく解説し、実践的な使い方を紹介します。

オブジェクト型とは？
1. 基本的なオブジェクト型の定義
オプショナルプロパティ
インデックスシグネチャ
型エイリアス
Readonlyプロパティ
まとめ

オブジェクト型とは？

オブジェクト型とは、複数のプロパティを持つオブジェクトの型を定義する仕組みです。

TypeScriptでは、{}（中括弧）を使ってオブジェクトの型を指定します。

基本的なオブジェクト型の定義

// ユーザー情報を表すオブジェクト型
let user: { name: string; age: number } = {
  name: "Taro",
  age: 25,
};

ゆーや

上記の例では、userオブジェクトはname（文字列）とage（数値）の2つのプロパティを持つオブジェクトが定義できました！

オプショナルプロパティ

オブジェクトのプロパティが必須でない場合、「?」を使ってオプショナルプロパティにできます。

let user: { name: string; age?: number } = {
  name: "Hanako",
};

この場合、ageを省略してもエラーになりません！

インデックスシグネチャ

プロパティ名が事前に決まっていない場合、インデックスシグネチャを使用できます。

let scores: { [key: string]: number } = {
  math: 80,
  science: 90,
};

ゆーや

この型定義では、任意の文字列キーに対して数値を値として設定できます。

型エイリアス

同じオブジェクト型を何度も使う場合、型エイリアスを定義すると便利です。

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

let user1: User = { name: "Taro", age: 30 };
let user2: User = { name: "Jiro", age: 28 };

ゆーや

typeで型を宣言することで、型エイリアスが定義できます！
使いまわすときに便利です！
詳しくは以下の記事で解説しています！

Readonlyプロパティ

オブジェクトのプロパティを変更不可にするには、readonlyを使用します。

type User = {
  readonly id: number;
  name: string;
};

let user: User = { id: 1, name: "Taro" };
user.name = "Jiro"; // OK
user.id = 2; // エラー: idは変更不可

まとめ

TypeScriptのオブジェクト型は、型安全なコードを書くための強力なツールです。

本記事では、

「TypeScriptのオブジェクト型を完全解説！基本から応用まで」

と題して、TypeScriptのオブジェクト型の基本から応用までを詳しく解説してきました。

✅基本的なオブジェクト型の定義
✅オプショナルプロパティ
✅インデックスシグネチャ
✅型エイリアス
✅readonlyプロパティ

オブジェクト型を適切に使いこなすことで、型安全なコードを書きやすくなり、バグの少ないアプリケーション開発が可能になります。

ぜひ、プロジェクトに活用してみてください！