Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab【第10回 TypeScript勉強会】Utility Types

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab勉強会(定例会)のレポート記事になります!

はじめに

私が運営しているTSLabの第10回TypeScript勉強会の実施ログとなります。
今回のテーマは「Utility Types」!
第9回目までが基礎の基礎で今回からがようやく本番です!(笑)

ディスカッション内容

Utility Typesの種類と機能

今回は下記のリストからUtility Typesの種類や目的について議論を進めました。

  • Partial<Type>全てのプロパティをオプショナルプロパティに変換
  • Required<Type>全てのプロパティを必須プロパティに変換
  • Readonly<Type>全てのプロパティをreadonlyに変換
  • Record<Keys, Type>既存の型のプロパティをマッピングして新しい型を生成
    • Keys: オブジェクトのkeyに当たるリテラル・ユニオン型
    • Type: オブジェクトのvalueに当たる共通型
  • Pick<Type, Keys>既存の型から必要なプロパティのみを選択して新しいオブジェクト型を生成
    • Type: 既存の型
    • Keys: 既存の型から引き継ぐプロパティをリテラル・ユニオン型で指定
  • Omit<Type, Keys>既存の型から不要なプロパティのみを選択して新しいオブジェクト型を生成
    • Type: 既存の型
    • Keys: 既存の型から削除するプロパティをリテラル・ユニオン型で指定
  • Exclude<UnionType, ExcludedMembers>ユニオン型から指定した型を削除して新しいユニオン型を生成
    • UnionType: 既存のユニオン型
    • ExcludedMembers: 既存の型から削除する型、ユニオン型で指定
  • Extract<Type, Union>ユニオン型から割り当て可能な型を抽出して新しいユニオン型を生成
    • Type: 既存の型
    • Union: ユニオン型、合致させたい条件となる型
  • NonNullable<Type>既存の型からnullとundefinedを除外した新しい型を生成
  • Parameters<Type>関数の引数のタプル型を生成する
  • ConstructorParameters<Type>コンストラクタの型からタプル型または配列型を生成
  • ReturnType<Type>関数型を渡すことで関数の返り値の型を新しい型として生成
  • InstanceType<Type>コンストラクタのインスタンス型から新しい型を生成
  • ThisParameterType<Type>関数型のthisパラメーターの型を生成
  • OmitThisParameter<Type>関数型のthisパラメーターを削除した新しい方を生成
  • Uppercase<StringType>文字列型を大文字に変換
  • Lowercase<StringType>文字列型を小文字に変換
  • Capitalize<StringType>文字列型の一文字目を大文字に変換
  • Uncapitalize<StringType>文字列型の一文字目を小文字に変換

Pick / Omit

皆さんと話していて共通で出てきたのが「Pick / Omitはバンバン使いますけど、その他は使いませんね。」です。
正直私も同意見。。
元の型から必要な型を生成する際に割と使うのがこのPick / Omitだと思います。
Reactの子コンポーネントのProps型を作成する時に結構使うイメージですね。
他はマジで使ったことないです。「こんなケースで使えるよ!」みたいなのがあったら是非教えてください。

Record

今回の勉強会で「お!めっちゃ使えそうじゃん!」と思ったのがこのRecord。
オブジェクトのキーにあたる型とバリューにあたる型をそれぞれ分けて定義しておくことで、キーの型を外部にexportしたり出来るので使い回しの良い型が出来そうですね!
これは早速現場でも使っていこうと思います!

Utility Typesの内部実装

いつもご参加くださるTaigaさんはUtility Typesの内部実装を重点的に見ていらっしゃいました。(流石や。)
@taiga_skg Twitter
この記事内で全てを解説するのは難しいのですが、Utility Typesは下記の組み合わせて出来ているのが理解できました。

  • Mapped Types がベースになっている
  • Conditional Typesで生成する型を判定している
  • Union Typteの分配法則について
  • never型を割り当てると除外対象になる

その他に「inferって何者だ!?」と議論になったのですが、結論が出なかったので次回以降にふかぼっていこうと思います。

さいごに

以上。第10回目の勉強会はUtility Typesでした。
ようやく基礎が終わってここからが本番に差し掛かるのでとても充実した議論ができたと思います。
とある方が「TypeScriptはUtility Typesを自作出来てからが本番」と仰っていましたが、ようやく意味がわかりました。笑
確かにそのようですね。(私はまだ無理です)
ここから先は更に難しくなってくるので、次回はTypeScript基礎の総復習会にしようと思います!
最後までご覧いただきありがとうございます!
一緒にTypeScriptを学びたい方はぜひ私のアカウントからご連絡ください!