TypeChallenges（型パズル）って聞いたことありますか？
TypeScriptの型システムを題材にした問題集で、遊びながら型への理解を深められます。
この記事では、TypeScriptのTypeChallengesがどんなものかを紹介します。
対象読者
- TypeScriptを使っているが、型をもっと理解したい人
- TypeScriptが好きな人
対象外読者
- TypeScript入門者
- TypeChallengesはチュートリアルではないので、一からの勉強には不向きです
- TypeScript未経験者
- 本記事はTypeScriptの話に絞っています
結論
- TypeScriptの型システムを楽しく学べる
- 競プロより短時間でサクッと学べる
- 最低限の事前知識は必要
TypeChallengesとは？
GitHubのtype-challenges/type-challengesリポジトリで公開されている、TypeScript向けの型パズルです。
TypeScriptの型システムの理解に役立つクイズ集、と言っても良いと思います。
高品質な型は潜在的なバグを回避しつつ、プロジェクトの保守性を向上させるのに役立ちます。
このプロジェクトはUtility型を作るにあたって、型システムがどのように動くのかを理解する手助けを目的としています。あるいは、純粋に型パズルを楽しむのもよいです。
https://github.com/type-challenges/type-challenges/blob/main/README.ja.md
引用のとおり、TypeChallengesの良いところは、型システムを理解できることと、型パズルとして楽しめることです。
やり方
公式のtype-challenges/type-challengesリポジトリをクローンして、ローカルで取り組めます。
また、https://mosya.dev/type-challenges ではブラウザ上でも試せます。
テストケースのエラーがすべて消えればクリアです。
具体的に
Pick を例にします。
問題文
組み込みの型ユーティリティPickを使用せず、TからKのプロパティを抽出する型を実装します。
例えば：
interface Todo {
title: string
description: string
completed: boolean
}type TodoPreview = MyPick
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
}
問題文の解説
TypeScriptには、組み込みのPickというユーティリティ型があります。
第1引数にオブジェクト型、第2引数にそのオブジェクトのキーを指定すると、
指定したキーだけを残したオブジェクト型を取得できます。
この問題文でいうと、Todoオブジェクト型（title, description, completedのキーを持つ型）から、titleとcompletedだけを残したTodoPreviewオブジェクト型を作ります。
つまり、第1引数にオブジェクト型、第2引数にキーを指定すると、そのキーだけを残した型を返す型を自分で書いてみる、というクイズです。
回答例
type MyPick<T, K extends keyof T> = { [P in K]: T[P] }
TypeScriptを使っていても、見慣れない記法が多いかもしれません。
最低限、次のあたりを知っていると取り組みやすいです。
最低限あると読みやすい前提知識
-
TやKって何？- ジェネリクスです。関数でいう引数のように、型を外から受け取るための仕組みです。
-
extendsって何？- ここではクラス継承ではなく、ジェネリクスで受ける型への制約です。
-
K extends keyof Tと書くことで、KはTのキーだけに限定されます。
-
[P in K]って何？- Mapped Types（マップ型）です。
Kに含まれるキーを順番に取り出して、新しいオブジェクト型を組み立てます。
- Mapped Types（マップ型）です。
easyの最初の問題でもこれくらいの前提知識は使うので、ジェネリクス・extends・Mapped Typesあたりは最低限知っておくと読みやすいです。
その意味で、完全な入門者向けというよりは、少し触ったことがある人向けだと思います。
終わりに
個人的には、TypeScriptのユーティリティ型（PickやOmit、Partialなど）を使えるだけでも実務上は十分な場面が多いと思います。
それでも、型システムへの理解が深まると、型エラーの読み方や型の組み立て方がわかってきて、TypeScriptがより楽しくなります。
競プロのように数時間かかるわけではなく、1問1〜5分くらいで試せる問題も多いです。（自分は今のところmediumまでしかやっていないですが、今のところ10分未満くらいだと思います）
コード量も少なく、ブラウザでもチャレンジできるので、とっかかりとしてかなり良いと思います。