組み込み型とライブラリの型から学ぶUnion Distributionの活用法

TSKaigi 2024 After Talk

Transcript

1. 組み込み型とライブラリの型から学ぶUnion Distributionの活用法 2024/06/04 - TSKaigi 2024 After Talk
2. 自己紹介 • 株式会社viviON フロントエンドエンジニア • TSKaigi2024運営スタッフ • ギターが好き suke/@suke083
3. Union DistributionとDistributive Conditional Types type NonNullable<T> = T extends null | undefined ? never : T; type T1 = NonNullable<string | null> // NonNullable<string> | NonNullable<null> // string | never // string • Conditional Typesの条件部の左側にユニオン型が直接渡された場合、ユニ オン型の各要素に対して個別に条件が適用される特性 ◦ この特性をUnion Distribution(ユニオン分配)という • 条件部の右側にユニオン型が渡された場合は分配が発生しない
4. Union DistributionとDistributive Conditional Types // Tは分配される type T1<T> = T extends string ? true : false // Tは分配されない type T2<T> = [T] extends [string] ? true : false // Tは分配され、Uは分配されない type T3<T, U> = T extends U ? true : false
5. Union Distributionによって意図しない動作をする例 type IsString<T> = T extends string ? true : false 　 type T1 = IsString<string | number> type T1 = IsString<string> | IsString<number> // string | numberはstring型ではないため期待する結果は falseになる type T1 = true | false
6. Union Distributionによって意図しない動作をする例 // 型引数をタプル型などでラップすることで分配を発生させない type IsString<T> = [T] extends [string] ? true : false type T1= IsString<string | number> // 分配が発生しないため [string | number] extends [string] ? true : false として評価される type T1 = false
7. 両方の特性を利用した例 type IsUnion<T, U extends T = T> = ? チャレンジしてみてください！ https://github.com/type-challenges/type-challenges/blob/main/questions/01097-medium-isu nion/README.md
8. 両方の特性を利用した例 type IsUnion<T, U extends T = T> = IsNever<T> extends true ? false : T extends U ? [U] extends [T] ? false : true : false; type IsNever<T> = [T] extends [never] ? true : false type T1 = IsUnion<string | number> // IsNever<string> extends true ? false : string extends string | number ? [string | number] extends [string] ? false : true : false
9. 組み込み型での活用例
10. Exclude型 type Exclude<T, U> = T extends U ? never : T type T1= Exclude<'a' | 'b' | 'c', 'a' | 'b'> // 'c' // 以下のように展開される type T1 = Exclude<'a', 'a' | 'b'> | Exclude<'b', 'a' | 'b'> | Exclude<'c', 'a' | 'b'> type T1 = never | never | 'c' type T1 = 'c'
11. Extract型 type Extract<T, U> = T extends U ? T : never type T1 = Extract<'a' | 'b' | 'c', 'a' | 'c'> // 'a' | 'c' // 以下のように展開される type T1 = Extract<'a', 'a' | 'c'> | Extract<'b', 'a' | 'c'> | Extract<'c', 'a' | 'c'> type T1 = 'a' | never | 'c' type T1 = 'a' | 'c'
12. react-hook-formでの活用例
13. HasKey型 type HasKey<T, K extends Key> = IsNever<Exclude<K, Keys<T>>> type T1 = HasKey<{ foo: string, bar: string }, 'foo'> // true type T2 = HasKey<{ foo: string, bar: string }, 'foo' | 'hoge'> // false // IsNever<Exclude<'foo' | 'hoge', 'foo' | 'bar'>> // IsNever<'hoge'> // false https://github.com/react-hook-form/react-hook-form/blob/v7.51.5/src/types/path/common.ts#L376
14. CheckKeyConstraint型 type CheckKeyConstraint<T, K extends Key, U> = K extends any ? EvaluateKey<T, K> extends U ? K : never : never type T1 = CheckKeyConstraint<{ foo: string, bar: number }, 'foo' | 'bar', string> // ‘foo’ https://github.com/react-hook-form/react-hook-form/blob/v7.51.5/src/types/path/common.ts#L307
15. UnionToIntersection型 type UnionToIntersection<U> = ( U extends any ? (_: U) => any : never ) extends (_: infer I) => any ? I : never type T1 = UnionToIntersection<{foo: string} | { bar: number }> // { foo: string } & { bar: number } https://github.com/react-hook-form/react-hook-form/blob/v7.51.5/src/types/path/common.ts#L72 https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type/50375286#50375286
16. まとめ • 分配の特性によって、ユニオン型の変換、フィルターが成り立っている • 分配によって意図しない動作をすることがあるので注意
17. ご清聴ありがとうございました！