[TypeScript]オブジェクト定数から型定義するのが便利だよって話
こんにちわ、かねこです。
自分は普段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;}となる
この定義の方法でも定数をまとめるという使い方として良いのですが、このままだとCREATE
とUPDATE
がstring
型のままです。
どうせなら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"
のユニオン型を定義していきます!
定数から型定義する
定数から型を定義する方法は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"として定義ができる
最後に
以上が、定数から型定義する方法の説明でした。
定数から型定義することで「型安全性」や「可読性」の向上に役立つと思います!
今後もこういった自分の困りポイントだったり設定手順だったりを発信していけたらなと思います🐈
toraco株式会社では2024年11月1日にエンジニア向けのコミュニティを立ち上げました。
Discord のサーバーで運営しており、以下のリンクから無料で参加できます。コミュニティ内では以下のような投稿・活動がされます!
Discussion