$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

TypeScriptの型を手に馴染ませるためにやっていること

tech

最近TypeScriptが好きで勉強していっている。しかしなかなか型定義周りが手に馴染まず、少し複雑な型定義を読んだり、自分でユーティリティ型を定義したりすることが難しかった。

そこで型を手に馴染ませるために色々学習をしてみたので、やっていることをメモしておく。

まずざっとTypeScriptの型概要を学ぶ

まずTypeScriptでの型を簡単に学ぶには以下の2つの資料がわかりやすかった。

ひたすら型演習をする

資料を読むだけでは全く手に馴染まないと思ったので、その後ひたすら型演習をしている。

まずは TypeScriptの型演習 - Qiita 。これは先程の型初級、型入門の記事を書いた人が演習問題を作っているため同じ流れで学習でき、さらに解説編も充実しているので、手を動かしながら学ぶのに最適であった。これを自分で二周解いてみた。

1周目に比べて、2周目では解ける問題が増え、解く速度も上がった。いい感じに復習効果で定着してきているので、周回してみたのは良かったと思う。もう1周くらいやってみても良さそう。

さらにtype-challengesの演習問題も解いてみている。こちらはまだ1周目のmediumまで。こっちも何回か周回してみると良さそう。

面白かった話題

union distribution

union distributionは頻出なんだけど、めちゃくちゃ難しかった。https://qiita.com/uhyo/items/da21e2b3c10c8a03952f#conditional-type%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8Bunion-distribution にわかりやすい解説がある。

自分の中では、union型でforループやfilter、mapが出来て便利だね、という理解に落ち着いた(全然理解が正確では無いと思うけど...)。

-?を使ってフィールドをundefinedで無くす

こういう書き方が出来る。

type Type1<Obj> = {
  [Key in keyof Obj]-?: Obj[Key]
};
type Type2 = Type1<{
  hoge?: number;
  fuga: string;
  piyo?: undefined;
}>;

// 以下のような定義になる
// type Type2 = {
//     hoge: number;
//     fuga: string;
//     piyo: never;
// }

型レベルで検証する型を作れる

https://github.com/type-challenges/type-challenges/blob/f9b3bb0b5f7e9095be840fe3cba154f6f0566693/utils/index.d.ts が面白かった。こういう型を作ることで、

type ExpectHogeAndFugaEqual = Expect<Equal<Hoge, Fuga>>;

のように書いておくと、HogeとFugaの型が一致するなら型チェックが通り、HogeとFugaの型が一致しないなら型エラーで落ちてくれる。

まとめ

今回はTypeScriptの型を手に馴染ませるためにやっていることについてメモしてみた。徐々に型定義ファイルを読めるようになってきていて、自分でもちょっとした型を作れるようにもなってきているので、このまま演習を続けていきたい。