TypeScriptのオブジェクト型の書き方と構造の指定方法をやさしく解説!
生徒
「TypeScriptで、ひとつにまとまったデータを扱いたいときって、どう書けばいいですか?」
先生
「それなら“オブジェクト型”を使うのが便利ですよ。複数の情報を1つにまとめて扱えるんです。」
生徒
「オブジェクト型って、どうやって書くんですか?難しそう…」
先生
「大丈夫!まずは基本の書き方から丁寧に説明するので、一緒に学んでいきましょう。」
1. オブジェクト型とは?
TypeScript(タイプスクリプト)におけるオブジェクト型とは、「複数の項目を一つにまとめたデータのかたまり」です。たとえば、「名前」「年齢」「住所」などの情報を一人の人物としてまとめるときに使われます。
JavaScriptにもオブジェクトというものがありますが、TypeScriptではその構造(形)をあらかじめ定義できるのがポイントです。
2. オブジェクト型の基本的な書き方
まずは、名前と年齢を持つ「人物」オブジェクトを作ってみましょう。TypeScriptでは型注釈を使って、どんな項目があるのかを明確にします。
let person: {
name: string;
age: number;
} = {
name: "山田太郎",
age: 25
};
この例では、personという変数に、「nameは文字列(string)」「ageは数値(number)」という型の情報をあらかじめ指定しています。
3. オブジェクト型に指定できる主な型
オブジェクト型の各項目(プロパティ)には、次のようなさまざまな型を指定できます。
- string:文字列(例:「名前」や「住所」)
- number:数値(例:「年齢」や「料金」)
- boolean:真偽値(例:「有効かどうか」など)
- 配列型:複数の値をまとめて扱う(後ほど学びます)
以下は、文字列・数値・真偽値を使ったオブジェクトの例です。
let product: {
title: string;
price: number;
inStock: boolean;
} = {
title: "ノートパソコン",
price: 120000,
inStock: true
};
4. オブジェクト型の中で「?」を使う方法(任意プロパティ)
すべての項目が「必須」である必要はありません。場合によっては、「あってもなくてもいい情報」もありますよね。そんなときは、プロパティ名のあとに?(はてなマーク)をつけます。
let user: {
id: number;
nickname?: string;
} = {
id: 1
};
nicknameはあってもなくてもOKなので、省略してもエラーになりません。
5. オブジェクト型の入れ子構造(ネスト)
オブジェクトの中に、さらに別のオブジェクトを含めたい場合もあります。これをネスト(入れ子構造)といいます。
let employee: {
name: string;
department: {
name: string;
floor: number;
};
} = {
name: "佐藤花子",
department: {
name: "開発部",
floor: 3
}
};
このように、構造が深くなってもTypeScriptなら型をしっかり定義できるので、プログラムのミスを減らせます。
6. オブジェクト型と型エラーの確認
TypeScriptは、型が合わないときに自動的にエラーを出してくれます。たとえば、数値を入れるべきところに文字列を入れてしまった場合です。
let book: {
title: string;
pages: number;
} = {
title: "TypeScript入門",
pages: "三百ページ" // これはエラー!
};
Type 'string' is not assignable to type 'number'.
このように、TypeScriptを使うことで間違った型のデータを早い段階で見つけることができます。
7. オブジェクト型の書き方を覚えるコツ
オブジェクト型を覚えるときは、以下のポイントを意識しましょう。
- 「{}」で囲む:オブジェクト型の基本
- プロパティ名: 型の形で1つずつ書く
- 最後の「,(カンマ)」を忘れない
- ネストする場合も型をしっかり書く
- 任意プロパティには「?」をつける
最初は覚えることが多く感じるかもしれませんが、何度も書いているうちに自然と身につきます。
まとめ
TypeScriptにおけるオブジェクト型の書き方は、初心者にとってやや難しく感じる部分もありますが、型を明確に定義することで、プログラムの信頼性と読みやすさが格段に向上します。特に、複数の情報を1つにまとめて扱いたい場面では、オブジェクト型を使うことでデータ構造がすっきり整理され、後から見直す際にも理解しやすくなります。
基本の書き方としては、{ name: string; age: number }のように、プロパティ名と型をセットで記述する方法が一般的です。また、string型やnumber型、boolean型など、さまざまな型を柔軟に組み合わせることが可能です。
実務では、任意の項目を扱いたい場面も多いため、?を使った任意プロパティの指定方法も重要です。たとえば、ニックネームのように「入力されることもあれば、省略されることもある」という情報はnickname?: stringのように書くことで、柔軟に対応できます。
また、オブジェクトの中にさらにオブジェクトを持たせるネスト構造も、現実のデータを扱う上でよく使われるパターンです。部署情報や住所情報のように複数の階層に分かれるデータも、型定義を丁寧に行うことで安全かつ見通しの良い設計ができます。
型エラーに対してもTypeScriptは非常に厳密です。間違った型の値が代入された場合には、実行前にしっかりエラーを出してくれるので、開発中のトラブルを未然に防げます。この「事前に気づける」というのが、JavaScriptと違ってTypeScriptが選ばれる大きな理由のひとつでもあります。
以下は、今回の学習内容を整理した簡単なサンプルコードです。
let student: {
id: number;
name: string;
email?: string;
course: {
title: string;
credits: number;
};
} = {
id: 101,
name: "田中一郎",
course: {
title: "TypeScript基礎",
credits: 3
}
};
console.log(student.name); // "田中一郎"
console.log(student.course.title); // "TypeScript基礎"
上記の例では、studentというオブジェクトの中にcourseというネストされたオブジェクトを含み、emailは任意プロパティとして定義しています。こうした使い方をマスターすることで、複雑なデータ構造にも対応できるようになります。
最後に覚えておいてほしいのは、型定義は「ルール」ではなく「味方」であるということです。最初は少し堅苦しく感じるかもしれませんが、慣れてくるとそのありがたみが自然と実感できるようになります。TypeScriptのオブジェクト型を使いこなすことは、安全で効率的なコードを書くための第一歩です。
生徒
「オブジェクト型って、最初はちょっと難しかったけど、今はだいぶ分かってきました!」
先生
「それは素晴らしいですね。構造を型で定義できるようになると、コード全体がとても整理しやすくなりますよ。」
生徒
「任意のプロパティとか、ネストしたオブジェクトも書けるようになったのが嬉しいです!」
先生
「その調子です。TypeScriptでは、型がきっちり決まっていれば、安心して大規模なアプリ開発にも挑戦できますからね。」
生徒
「次は配列の中にオブジェクトがあるパターンも学びたいです!」
先生
「いいですね。それもよく使うパターンですし、今回の内容をしっかり押さえておけばスムーズに進められますよ。」