TypeScriptの型をビジュアルで理解！「Visual Types」が良かった
はじめに
こんにちは、型パズル勉強中の おじょう(id: Ojoxux) です。
この記事は TypeScript の型に慣れていない方や、type-challenges で型パズルに挑戦している方に向けた記事です。
型って難しいよね
TypeScript の型システムは強力ですが、書いた型がどう評価されるのか、意外とつまずきやすいですよね。
また type-challenges などで型パズルに挑戦していると、「この型、どういう理由でこの型になるん？」と頭を抱えた経験がある方も多いと思います。
そのようにお悩みの方に向けたおすすめのサイトがあったので、紹介します！
Visual Types とは
Visual Types は、TypeScript の型システムの様々な概念をシンプルにビジュアライズしてくれる型ビジュアライザです。
前からこういうのが欲しかったんですよ！
作者は Effect-TS のコミュニティでも活躍されている Kit Langton さんが公開しています。
Visual Types を触ってみて...
実際に触ってみると、その良さがさらに実感できました。
様々なケースの入力と出力のセットがある
最大の特徴は、TypeScript の型システムに関する概念を、複数のケースの"入力→出力"の形で見せてくれる点です。
例えば、Subtypes as Subsets のセクションでは、A extends Bという部分型をベン図を使って部分集合としてうまーく表現してくれてます。
いくつか例を見てみましょう。
"kit" extends stringのケースでは、小さな円（"kit"）が大きな円（string）の中に含まれる様子がベン図で表示されます。これにより、「"kit" は string の部分集合だから成立する」という関係性がすぐに理解できます。
一方、false | "maybe" extends "maybe" | trueのケースでは、2 つの円が一部重なっているものの、完全には含まれていない様子が表示されます。共通部分が"maybe"のみで、左側にはfalse、右側には`trueがあるため、部分的には重なるが、包含関係にならないことが一目でわかります。
このように、複数のケースを見比べることで、より理解が深まりそうです！
豊富なセクションが用意されている
Visual Types には以下のような幅広いセクションが用意されています。
Foundation（基礎編）:
- Types as Sets（型と集合）
- Literal Types（リテラル型）
- Union Types（ユニオン型）
- Subtypes as Subsets（部分型）
- Tuple Types（タプル型）
- Object Types（オブジェクト型）
- Intersection Types（交差型）
Basic II（応用編）:
- Type Aliases（型エイリアス）
- Generic Types（ジェネリック型）
-
typeof演算子 as const-
unknownvsany
Object Patterns（オブジェクトパターン）:
-
keyof演算子 - Indexed Access（インデックスアクセス型）
- Mapped Types（マップ型）
Conditional Types（条件付き型）:
- Conditional Types（条件付き型）
- Reflexivity（反射性）
- Conditional Unions（条件付きユニオン）
- Conditional Non-Distribution（条件の分配防止）
- Conditional Filters（条件フィルタ）
-
inferキーワード
Utility Types（ユーティリティ型）:
- Utility Types（
Pick,ReturnType,Parameters）
TypeScript でよく使われるような概念をセクションごとにまとめてくれているので、一つ一つのセクションを見ていくだけでも非常に勉強になります。(あと個人的にケースを切り替えたときの音が気持ちいいです。)
実際に見てみよう：Pickの例
type-challenges における最初の鬼門、Pick を Visual Types で見てみましょう。
Pickとは、オブジェクト型から指定したプロパティだけを抽出するユーティリティ型のことです。
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
中身を説明すると、K extends keyof Tでオブジェクトのキーのみを受け付けて、[P in K]: T[P]でそれらのプロパティをマッピングする型なのですが、初見だとなんのこっちゃですよね。
Visual Types では、例えば以下の入出力ケースが挙げられています。
入力例として"a" | "b"が指定されていて、出力例では"a"と"b"のみのオブジェクト型になっています。これならわかりやすい！！
他にも Pick を使った様々な入出力ケースが用意されていて、Pick による型操作を直感的に学ぶことができます。
まとめ
TypeScript の型システムは最初は難しく感じますが、このようなビジュアライザを使うことでよりとっつきやすくなりそうです！
Visual Types は以下のような時に特に役に立つと思います。
-
型の基礎学習に - 条件付き型や
inferなど、型システムの基本的な概念を視覚的に理解できる - チーム内の説明に - ベン図などのビジュアルを使って、型の関係性を直感的に共有できる
- 公式ドキュメントの補助として - 文章だけでは理解しづらい概念を、視覚的に確認できる
ユーティリティ型のセクションはまだ充実していないので、type-challenges を挑む人にも今後のアップデートが楽しみな内容です。
ぜひ一度触って、型と仲良くなりましょう！！
Discussion