Type Challenges にブラウザ上のエディターで挑戦できるサービス。エディターの UI/UX が良く、サクサクトライすることができる。本家 Type Challenges には無い、ヒントや解説を提示してくれるのがありがたい。 Type Challenges の全ての問題にトライできるわけではないことに注意。

一問目を解いてみて余裕だろこれ！と思ったら二問目から爆死した。初級編を全てクリアしたが結果的にほとんどの問題が初見では解けなかった。自分の TypeScript 力の無さにわりと衝撃を受けた。

へこたれずに、新たに知ったテクや業務に使えそうな情報をメモっておく。

[K in keyof T]

Tのすべてのプロパティをユニオンとして取得してそれをオブジェクトのキーとして列挙する。

type Todo = {
  title: string;
  description: string;
}

type Result = {
  [K in keyof Todo]: string;
};

// 以下のように展開される
// type Result = {
//   title: string;
//   description: string;
// }

T['length']

Tの長さを取得できる。

type Hoge = [1, 2, 3]

type Result = Hoge['length'] // 3

[K in T[number]]

Tの各要素の値をオブジェクトのキーとして列挙できる。

const tuple = ["a", "b", "c"] as const;

type TupleToObject<T extends readonly any[]> = {
　　[K in T[number]]: K
}

type Result = TupleToObject<typeof tuple>;

// 以下のように展開される
// type Result = {
// 　　a: 'a'
// 　　b: 'b'
// 　　c: 'c'
// }

スプレッド演算子`...`

型にも使うことができる。

type Hoge = [1, 2];

type Result = [...Hoge, 3]; // [1, 2, 3]

Conditional Types

条件によって型を変更することができる機能。

type Hoge<T> = T extends string ? string : number;

type HogeString = Hoge<string>; // string
type HogeNumber = Hoge<boolean>; // number

never型と組み合わせることで、型の絞り込みを行うことができる。

type NonNullable<T> = T extends null | undefined ? never : T;

type Result = NonNullable< string | undefined >; // string

infer

型を推論することができる機能

type ArrayItem<T> = T extends (infer R)[] ? R : never;

type Result = ArrayItem<string[]>; // string

mosya<TC>の初級編をクリアした