TypeScript入門 ・ Chapter 10
オブジェクト型
記事 ・ 冒頭を無料公開中
ここまでの型は単品(文字列、数値)と並び(配列)でした。この章は、実務のデータの主役である、オブジェクトに型をつけます。APIのレスポンスも、設定も、ユーザー情報も、現場で触るデータはほぼ全部オブジェクトです。この章で「形の設計図を書き、省略や変更不可まで表現する」ところまで行きます。
オブジェクト型の基本
オブジェクトの型は、形の設計図をそのまま書きます。
type User = {
name: string;
age: number;
};
const user: User = {
name: "田中",
age: 28,
};
設計図に合わないオブジェクトは型エラーです。プロパティが足りない、余計な型の値が入っている、どちらも捕まります。
optionalで、「無くてもいい」を ? で表す
プロパティ名の後ろに "?" をつけると、省略可能になります。
type User = {
name: string;
age: number;
bio?: string; // 自己紹介文。未記入の人もいる
};
const a: User = { name: "田中", age: 28, bio: "よろしく" }; // OK
const b: User = { name: "鈴木", age: 17 }; // OK(bioは省略)
大事なのは、"bio?: string" の読み方です。これは「stringか、undefinedか」という意味になります。省略された b の bio を読むと、undefinedが返る。つまりoptionalなプロパティを使う側は、「無いかもしれない」前提のコードを書く必要があります。
▶ 実行してみよう
このチャプターの続きは受講生限定です
本文の残り、図解・実行できるコードブロック・演習はプラン加入後に読めます。