Blogブログ

TypeScriptの形定義について

こんにちは。エンジニアの砂町です。
先日TypeScriptで開発しているプロジェクトで開発を行いました。
今まで勉強程度にしか触ったことがなかったので、ガッツリ書くのは始めてでした。
型定義により、画面でデバックを仕込んで確認する回数が少なくなった気がします。

ただ

  • 型定義をどのこまで厳密にするか?
  • どこまで共通のもので使い回すか?

この辺りで色々悩みました。
どうせ書くなら曖昧な型定義は極力避けたいなと思ったり、、、
今回はそんな型定義のことについて書いていきます。

型定義を使い回してみる

まずは下記のような型を既に定義して利用していたとします。

ベースの型
type User = {
    user_id: number;
    name: string;
    age: string;
}

この中から「name」と「age」だけ使用したいとなった場合に、新たに型を定義するのは面倒ですし管理もしにくくなりますよね。
こういう時はPickを利用することで、指定した必要なものだけ取り出して利用することが可能です。

type Hoge = Pick<User,'name' | 'age'>;

またOmitを利用することで、指定した不要なもの以外を利用することも可能です。

type Hoge = Omit<User,'user_id'>;

PickとOmitすごく便利です!

次はオプショナルの型にして利用したいと思ったときです。
※オプショナルとは必須ではない形
Partialを利用することで内容をオプショナルに一括で変更することがきます。

type Hoge = Partial<User>;

ちなみに一部だけオプショナルに変更したりすることも可能ですが、少し工夫が必要なので今回は省略します。

Readonlyを使うことで読み取り専用にしたりもできます。

type Hoge = Readonly<User>;

最後に複数の型を合わせて一つの型にしたい時のやり方です。
下記のUserとUserSettingを合わせて一つの型にしたい時などに使えます。

type User = {
    user_id: number;
    name: string;
    age: string;
}

type UserSetting = {
    type: number;
}
type Hoge = User & UserSetting;

他にもTypeScriptの型定義で便利そうな小技調べてたら山程でてきましたが、今回はこの辺で、、

まとめ

今回は型定義の簡単な小技を色々ご紹介してみました。
型定義だけでも調べてみたら、小技がたくさんあってTypeScript奥深いなってなりました。
ただ型定義で複雑になりすぎたりするのも面倒な気がしました。
TypeScript使ってる人達ってこの辺りどうしてるんですかね?
おすすめの方法などありましら、ぜひ教えてください!

砂町

執筆者

Developer

砂町