🍣

[TypeScript]オブジェクト定数から型定義するのが便利だよって話

2025/01/29に公開

こんにちわ、かねこです。

自分は普段Reactを使って開発をしているのですが、Reactにはconstantsと呼ばれる変数や値を定義する方法があり、プロジェクト内で使う値を一元管理でき変更が必要になった場合にも、一箇所で変更するだけで済むため、コードの保守性を高めることができたり、JSX内に生のテキストを書かなくて良くなるため、ソースコードの可読性が上がるので、かなり気に入っています。

その中でも最近、定義した定数からTypeScriptの型を生成する記述方法がかなりいいなと思ったので、共有していこうと思います〜

今回はTODOリストの新規作成画面と編集画面で同じコンポーネントを使っていて画面に応じて要素を出し分けたいといったケースを想定して話を進めていきます〜

定数を定義する

まずは定数を定義していきます。
Reactのconstantsを使う時私はよくsrc/constants/hogehoge.tsみたいな形でconstantsとして使いたいものをconstantsディレクトリ配下に格納することが多いです。
(他にもコンポーネント単位やページ単位でconstantsのファイルを作ることも多いです。)

今回は、現在のページが新規作成ページなのか編集ページなのかを判定するための定数を用意します。

# TODOリスト周りで使用する定数ファイル
src/constants/todo.ts

export const PAGE_TYPE = {
  CREATE: "CREATE",
  UPDATE: "UPDATE",
};
→ 型は{CREATE: string;UPDATE: string;}となる

この定義の方法でも定数をまとめるという使い方として良いのですが、このままだとCREATEUPDATEstring型のままです。
どうせならpageType: "CREATE" | "UPDATE"みたいなユニオン型で使いたいですよね。

そこで紹介するのがオブジェクト定義の末尾にas constをつける方法です!
as constをつけることですべてのプロパティを再帰的に読み取り専用(readonly)となるので、数値や文字列はリテラル型で固定できます!

export const PAGE_TYPE = {
  CREATE: "CREATE",
  UPDATE: "UPDATE",
} as const;
→ 型が{readonly CREATE: "CREATE";readonly UPDATE: "UPDATE";}となる

ここからさらに手を加えることで、PAGE_TYPEの定数から"CREATE" | "UPDATE"のユニオン型を定義していきます!

https://typescriptbook.jp/reference/values-types-variables/const-assertion

定数から型定義する

定数から型を定義する方法はkeyof typeofを組み合わせることです。
まずはtypeofを使って変数から型を抽出します。

export type PageType = typeof PAGE_TYPE;

→型が{readonly CREATE: "CREATE";readonly UPDATE: "UPDATE";}のtypeを作成できる

これにkeyofを組み合わせることでプロパティ名をユニオン型として定義ができます!

export type PageType = keyof typeof PAGE_TYPE;

→型を"CREATE" | "UPDATE"として定義ができる

https://typescriptbook.jp/reference/type-reuse/typeof-type-operator
https://typescriptbook.jp/reference/type-reuse/keyof-type-operator

最後に

以上が、定数から型定義する方法の説明でした。
定数から型定義することで「型安全性」や「可読性」の向上に役立つと思います!

今後もこういった自分の困りポイントだったり設定手順だったりを発信していけたらなと思います🐈

toraco株式会社では2024年11月1日にエンジニア向けのコミュニティを立ち上げました。
Discord のサーバーで運営しており、以下のリンクから無料で参加できます。コミュニティ内では以下のような投稿・活動がされます!

https://discord.gg/bga8nEfjfD

  • もくもく会・作業ラジオ・雑談部屋などオンライン上での交流
  • オフラインイベントの案内
  • 代表の稲垣(トラハック)が公開するコンテンツの説明・質問回答
  • toraco株式会社からの副業や案件の紹介
  • フロントエンド関連技術の情報共有および議論
  • 生成AI関連技術のキャッチアップ
  • その他、技術領域にこだわらない情報共有および議論
toraco株式会社のテックブログ

Discussion