誰でもできる type-challenges入門

Transcript

1. 誰でもできる type-challenges入門 2024/10/29 ココカラ勉強会
2. フロントエンドエンジニア 谷 郁弥（high-g）
3. いきなりですが、質問です declare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<{ [P in keyof T]: T[P] extends Promise<infer R> | infer R ? R : never }> 下記の型定義で何をしているか理解できますか？ もし、少しでも理解できない部分があるなら、、、 type-challengesをやりましょう！
4. type-challengesとは？ TypeScriptの型システムを理解しながら、楽しく型の表現力を身につけられるゲーム 例題 // 条件 C が true 型のときは型 T を、false 型のときは型 F を返す If 型を実装しなさい type If<C, T, F> = any 正解 type If<C extends boolean, T, F> = C extends true ? T : F 初見殺し、、、知識がないと難しい 🐱
5. type-challengesの攻略に必要な４つの基礎知識 Conditional Types（条件型、型の条件分岐） A extends ◯◯ ? T : F Generic Constraints（型引数の制約、ジェネリック制約） type If<C extends ◯◯> Mapped Types（マップ型、インデックス操作型） { [P in keyof T]: T[P] }; infer（推論） type ElementType<T> = T extends (infer U)[] ? U : never; type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never; declare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<{ [P in keyof T]: T[P] extends Promise<infer R> | infer R ? R : never }> ちょっと読めるようになったのでは・・・？
6. 戦いは終わらない type-challengesで強くなりましょう