type-challengesでTypeScriptの型を学んでみた【初級編】

こんにちは。AWS事業本部モダンアプリケーションコンサルティング部に所属している今泉（@bun76235104）です。

みなさんはTypeScriptの型について完全に理解していますか？私は正直雰囲気でやっている節があります。

なんとなく「型パズル」という言葉を耳にしたことがあったので、検索してみると以下のような記事が見つかったので早速やってみることにしました！

type-challengesとは

上記の記事に記載されていますが、type-challengesはTypeScriptの型を学ぶための問題集です。問題を解くことで型について理解を深めることができます。

私は利用していませんが、mosya | Type Challengesに挑戦して型力をつけようといったサービスもあるようです。

以下はHello,Worldというサンプル的な問題です。

// expected to be string
// 1: 以下の型を書き換えます。
type HelloWorld = any

// 2: 以下のようなテストケースが通るようにしてください
// you should make this work
type test = Expect<Equal<HelloWorld, string>>

初期状態では以下のようにコンパイルエラーが発生しています。

以下のように、型を書き換えることでコンパイルエラーが解消され、問題を解けたことになります。

このように問題を解きながら楽しく型を学べます。

私の場合、VSCodeでローカルで問題を解きながら自身への解説用にZennのスクラップに覚書を残しています。

おすすめの問題

せっかくなので何問かおすすめの問題と必要になる知識を紹介します。

なお、以下の問題に対する私の回答は以下のZennのスクラップにまとめています。

If

型で動的な条件分岐を行う問題です。

type A = If<true, 'a', 'b'>; // expected to be 'a'
// Ifの型に、型引数として3つのパラメーターを渡す。第一引数に渡されたものがtrueなどであれば、第2引数を返し、falseなどであれば第3引数を返す。

この問題を解くには以下のような知識が必要になります。

• 型引数の制約 | TypeScript入門『サバイバルTypeScript』
• Conditional Types | TypeScript入門『サバイバルTypeScript』

この問題で利用するConditional Types は今後の問題でも頻出するので、しっかりと理解しておくと良いと思います。

参考までに私の回答はこちらです。

Pick

MyPick という型を実装する問題です。

以下のように、元となっている型から指定されたキーを抜き出す型を実装する問題です。

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

// 以下のように指定した title と completed だけを持つ型が作成されます。
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

この問題を解くには、以下のような知識を必要とします。

• Mapped Types
  • When you don’t want to repeat yourself, sometimes a type needs to be based on another type. と書いているように 元ある型から似たような型を作る時に使えると覚えておけば便利そう
• 型引数の制約 | TypeScript入門『サバイバルTypeScript』
• TypeScript の"is"と"in"を理解する #TypeScript - Qiita
  • こちらの記事の Mapped Type のように元ある型のキーを全てオプショナルにした型を生成するなども可能

この問題で学習できる Mapped Types や [A in keyof T] といった知識は「元の型から似たような型を作る」時に非常に便利なので、これを機に覚えておくと良いと思います。

参考までに私の回答はこちらです。

最初に解くのは難しいと感じた問題

type-challenges では Easy となっている問題の中にも、「本当に初級レベルなのか？」と感じる問題も存在しました。

私の場合特に難しく感じたのは、以下の2問です。

• Awated
• Includes

この2問を解くには型の知識だけでなく、私の解法では再帰関数的な知識や実装の経験が必要であり、他の設問に比べて難しく感じました。

type-challenges の中でも「難しい」「Easyか？」というような感想がIssueで上がっているようでしたので、最初からできなかったといって落ち込む必要はないと思います！（そもそも他の問題も知っていないと解けないので、「こういうことができるのか」と楽しみながらやるくらいが良いと思います）

まとめ

• type-challenges はTypeScriptの型を学ぶための問題集です
• Easy問題でも難しい問題があるので、最初からできなくても大丈夫です！楽しみながらやりましょう！
• 個人的には既存のライブラリを拡張したり、ライブラリが動的に生成してくれる型を使って便利関数を作る時などに利用できそうだなと感じました

私としてもまだ Easy の問題を解き終わったばかりなので、 Medium なども少しずつ挑戦してみようと思います！

以上、最後までお読みいただきありがとうございました。