【TypeScript初心者】データ型③ - オブジェクトの特徴的な機能を理解する

はじめに

「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、オブジェクトについてです！

---

コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません

---

オブジェクトとは

• プリミティブ型以外のものすべて
• クラスから作ったインスタンスや、クラスそのもの、配列、正規表現など

プリミティブ型については、こちら↓

TypeScriptでのオブジェクトの特徴的な機能

オブジェクト構造の型を明示できる

オブジェクトの構造（プロパティとその型）を明確に定義できることで、コンパイル時に型の誤りをチェックできる

a. 型注釈による直接的な型指定

• 型注釈とは？
  • 変数や関数、オブジェクトなどの型を明示的に指定する機能
• 型注釈の書き方
  • JavaScriptオブジェクトリテラルのような書き方

let box: { width: number; height: number };

b. 型エイリアスによる再利用可能な型定義

• 型エイリアスとは？
  • 名前のついた型
• 型エイリアスの書き方
  • typeの後にエイリアス名（名前）をつけて、型を定義する

// 型エイリアス
type Box = { width: number; height: number };
let box: Box = { width: 1080, height: 720 };
//       ^^^型エイリアスを注釈として利用

型エイリアスのメリット

• 型の定義が一箇所になるため、保守性が向上する
• 型に名前をつけることで可読性が上がる

2. プロパティの柔軟な定義

a. オブジェクトのプロパティを読み取り専用にできる

• 読み取り専用にしたいプロパティにはreadonly修飾子をつける
• 読み取り専用のプロパティに値を入れようとすると、エラーが出るようになる

readonlyは指定したプロパティだけが読み取り専用になる
同じ構造の中身すべてを読み取り専用にするには、子や孫の各プロパティにもreadonlyをつける必要がある

---

※ readonly と constの違い

• JavaScriptでは constで宣言した変数は代入不可になる
  • 「代入不可」になる点でreadonlyと似てる
• constは変数自体を代入不可にする
  • 変数がオブジェクトの場合、プロパティへの代入はOK
• readonlyはプロパティを代入不可にする
  • 変数自体を置き換えるような代入はOK

readonlyとconstを組み合わせると、変数自体とオブジェクトのプロパティの両方変更不能なオブジェクトを作ることができる！

---

b. オプショナルプロパティ

• オプショナルプロパティとは？
  • オブジェクトのプロパティが必須でなく、存在しなくても良いことを示す記法
    • プロパティが無くても型エラーにならない
• オプショナルプロパティの書き方
  • プロパティ名の後ろに?を書く

type Size = {
  width?: number;
};

const size: Size = {}; // OK
const size: Size = {
  width: undefined,
}; // OK

オプショナルチェーンとの違い

• 使うタイミング
  • オプショナルプロパティ ?：オブジェクトのプロパティの型定義
  • オプショナルチェーン .?：式の中、特にプロパティアクセスやメソッド呼び出しの際
• 目的
  • オプショナルプロパティ ?：そのプロパティの存在が必須ではないことを示したい
  • オプショナルチェーン .?：null,undefinedの参照による実行時エラーを防ぎたい

さいごに

今回は、静的型付けを可能にする型注釈や型エイリアス、readonlyやオプショナルプロパティといった特徴的な機能について学びました。

次回は、今回少し触れた配列について、より深く読み進めてみようと思います！

アドカレ2025が開催中！

今年もアドカレ開催中です
面白そうなカレンダーがたくさんです！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考