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なプロパティを使う側は、「無いかもしれない」前提のコードを書く必要があります。

▶ 実行してみよう

このチャプターの続きは受講生限定です

本文の残り、図解・実行できるコードブロック・演習はプラン加入後に読めます。

料金プランを見る