前回の記事では TypeScriptの関数型 を解説しました。

TypeScriptでは

引数
戻り値

に型を指定することで、関数の仕様を明確にすることができます。

今回の記事では オブジェクト型 を解説します。

オブジェクト型はTypeScriptの中でも非常に重要な概念です。

この記事では次の内容を解説します。

オブジェクト型とは
typeによる型定義
interfaceによる型定義
Optionalプロパティ
readonlyプロパティ

ReactやAPI開発でも頻繁に使うため、しっかり理解しておきましょう。

オブジェクト型とは

JavaScriptでは次のようなオブジェクトをよく使います。

const user = {
  name: "Taro",
  age: 20
}

このオブジェクトには

name
age

という2つのプロパティがあります。

JavaScriptでは、この構造に特別な制約はありません。

例えば次のようなコードも書けてしまいます。

user.age = "twenty"

これは明らかに問題があります。

TypeScriptでは、オブジェクトの構造を 型として定義できます。

typeによるオブジェクト型

TypeScriptでは type を使って型を定義できます。

例

type User = {
  name: string
  age: number
}

この型を使ってオブジェクトを作ると

const user: User = {
  name: "Taro",
  age: 20
}

となります。

もし次のようなコードを書くと

const user: User = {
  name: "Taro",
  age: "twenty"
}

TypeScriptはエラーを出します。

理由

string は number に代入できない

からです。

オブジェクト型のメリット

オブジェクト型を定義することで次のメリットがあります。

データ構造が明確になる
IDE補完が強力になる
バグを防げる
APIレスポンス
React props
設定オブジェクト

データ構造が明確になる

例えば次のコードです。

function createUser(user: User) {
}

この関数を見るだけで

User型のデータが必要

ということが分かります。

IDE補完が強力になる

VSCodeでは次のように補完されます。

user.name
user.age

これはTypeScriptの型情報を利用しています。

バグを防げる

間違ったデータ構造を防ぐことができます。

例えば

user.address

のような存在しないプロパティはエラーになります。

Optionalプロパティ

TypeScriptでは Optionalプロパティ を使うことができます。

Optionalとは

省略可能

という意味です。

例

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

この場合

const user1: User = {
  name: "Taro",
  age: 20
}

も

const user2: User = {
  name: "Taro"
}

も正しいコードになります。

Optionalプロパティは

APIレスポンス
ユーザー入力

などでよく使われます。

readonlyプロパティ

TypeScriptでは readonly を使って変更不可のプロパティを作れます。

例

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

この場合

user.id = 10

はエラーになります。

readonlyは

ID
作成日時
固定データ

などでよく使われます。

interfaceによる型定義

TypeScriptでは interface でもオブジェクト型を定義できます。

例

interface User {
  name: string
  age: number
}

使い方は type と同じです。

const user: User = {
  name: "Taro",
  age: 20
}

typeとinterfaceの違い

初心者がよく迷うのが

type
interface

の違いです。

基本的な目安は次の通りです。

用途	おすすめ
オブジェクト定義	interface
複雑な型	type

ただし実務では

どちらでもOK

なケースも多いです。

実務での利用例

オブジェクト型は実務で非常によく使われます。

APIレスポンス

type User = {
  id: number
  name: string
  email: string
}

APIデータを型として定義します。

React props

type Props = {
  title: string
}

コンポーネントの入力データです。

設定オブジェクト

type Config = {
  theme: string
  darkMode: boolean
}

アプリの設定を管理します。

まとめ

この記事では TypeScriptのオブジェクト型 を解説しました。

重要なポイント

typeでオブジェクト型を定義できる
interfaceでも定義できる
Optionalプロパティがある
readonlyプロパティがある

オブジェクト型は

TypeScriptで最も重要な型

の一つです。

ReactやAPI開発でも頻繁に使うため、しっかり理解しておきましょう。

次回は

TypeScriptの配列型

を解説します。

配列型では

number[]
Array
オブジェクト配列

などを詳しく説明します。

TypeScriptのオブジェクト型（type / interface の基本） – 6/13