概要

TypeScript をまともに触ったことが無いので、使いながら覚えようということで type-challenges の初級を全問解答してみました。(2022/09/21現在)
と、格好をつけていますが、13問しかないのですぐです。

中級も8割ぐらい挑戦してみて、ある程度こういうケースはこういうふうに対応するんだという、ヒントとなるコツが見えてきたので、それもまとめてみます。

解答のヒント

配列を分割する

.ts

// T が any[] の場合
T extends [...infer A, infer B] ? A : never

// 上記の例では、T = [1,2,3,4] であれば、 A には [1,2,3], B には 4 が入る
// T が [] の場合、 never が返る

文字列を分解する

.ts

// T の最初の文字がLに入り、残りがRに入る
T extends `${infer L}${infer R}`

// T が xxxxhoge である場合、 X に xxxx が入る
T extends `${infer X}hoge`

配列をユニオン型にする

.ts

T[number]

// 使用例
type TupleToUnion<T extends unknown[]> = T[number]
TupleToUnion<[123, '456', true]> //=> 123 | '456' | true

ユニオン型を用いてオブジェクト型を作る(mapped types)

.ts

// K は文字列だと 1つのプロパティを持つオブジェクト型になるが、
// K がユニオン型だと、各型をプロパティとして持ったオブジェクト型になる
// 右辺(valueに該当する箇所) は P 以外でももちろん良い
// プロパティのキーは string | number | symbol 型である必要がある
// 下の例で言えば、 K extends string | number | symbol である必要がある
{ [P in K]: P }


// 特定のプロパティのみ残したい場合
// KからPを作り、そのPについて、Xを満たすかどうかで分岐をかける。
// never が返ってきた場合、生成されるオブジェクト型からそのプロパティは排除される
{ [P in K as P extends X ? P : never]: P }

配列の要素数を出す

数を条件に分岐をさせる場合にはこれをよく利用する。
A['length'] extends 5 ? true : false ←こういう使い方を再起処理で使ったりする。

.ts

type A = [1,2,3]
A['length'] // => 3

//　ちなみに、string型に対して、同じ容量で文字数を出すことはできない
type S = "string"
S['length'] // => number

全く同じ型であるかどうかを確認する

.ts

Equal<A, B> extends true ? 真の場合 : 偽の場合

// A が false, B が boolean の場合に
// A extends B だと true になる
// このケースで false にしたい場合は Equal<A, B> を使う

以下解答

4 - Pick.ts

// K の型を縛る点がミソ
type MyPick<T, K extends keyof T> = {
  [P in K]: T[P]
}

// 以下は間違い。 
// K の型が定まっていないので、以下の点で明確ではなくなるので型エラーがでる
// 1. Kがプロパティキーに入れられる型かどうか、
// 2. Kから取り出したプロパティPがTのキーとして利用できる型かどうか
// type MyPick<T, K> = {
//  [P in K]: T[P]
// }

7 - Readonly.ts

// readonly を各プロパティに付けているだけ
type MyReadonly<T> = {
  readonly [P in keyof T]: T[P]
}

11 - Tuple to Object.ts

// 配列をユニオン型に変換するテクニック、 T[number] を使えば良い
// PropertyKey は、プロパティーキーに入れることができる型のユニオン型 string | number | symbol と同義
type TupleToObject<T extends readonly PropertyKey[]> = {
  [P in T[number]]: P
}

14 - First of Array.ts

// 配列の最初 or 最後を取り出す時に infer を使うやり方 Array extends [infer F, ...infer B]
// T extends Tの条件 ? 合致する場合の型 : 合致しない場合の型
type First<T extends any[]> = T extends [infer A, ...infer B] ? A : never

// 以下は T が [undefined] の場合に never が返ってしまう
// type First<T extends any[]> = T[0] extends undefined ? never : T[0]

// 一番簡単なやり方
type First<T extends any[]> = T extends [] ? never : T[0]

18 - Length of Tuple.ts

// 配列から要素数を抜き出すやり方 T['length']
// 問題で渡される配列は as const がついているので、 型引数の中に readonly が必要
type Length<T extends readonly unknown[]> = T['length']

43 - Exclude.ts

// ユニオン型から特定の条件に合致する別のユニオン型を作る
// U と合致した型 T のみを使ったユニオン型を作っている
type MyExclude<T, U> = T extends U ? never : T

189 - Awaited.ts

// MyAwaited<T extends Promise<unknown>> で Promise型だけ引数にとるようにします
// T extends Promise<infer A> で 引数の型をAとして取り出します
// A extends Promise<unknown> で、Aが Promise型かどうかで分岐をかけています
type MyAwaited<T extends Promise<unknown>> = T extends Promise<infer A>
  ? A extends Promise<unknown>
    ? MyAwaited<A>
    : A
  : never

268 - If.ts

// extends を用いた三項演算子の基礎のような問題
type If<C extends boolean, T, F> = C extends true ? T : F

533 - Concat.ts

type Concat<T extends unknown[], U extends unknown[]> = [...T, ...U]

898 - Includes.ts

type Includes<T extends readonly any[], U> = T extends [infer A, ...infer B]
  // ここが A extends U, もしくは U extends A だと 
  // [A, U]に [boolean, true] または [true, boolean] などの組み合わせがある場合に
  // true 扱いになってしまうので、 Equal<>を使う
  ? Equal<A, U> extends true
    ? true
    : Includes<B, U>
  : false

3057 - Push.ts

type Push<T extends unknown[], U> = [...T, U]

3060 - Unshift.ts

type Unshift<T extends unknown[], U> = [U, ...T]

3312 - Parameters.ts

//  (...args: any[]) => any と Function は 同義
// 関数型の引数の型を infer で A に移し、それをそのまま返している
// T は関数型なので、T extends (...args: infer A) => unknown が合致しないケースは無いので、
// 三項演算子の不一致時の戻り値は never
type MyParameters<T extends Function> = T extends (...args: infer A) => unknown
  ? A : never