I show the reason Distributive Conditional Type needs to be used for Union Type in this post.
If generic type T is passed as Union Type like string | number
, then array item will be Union Type as below.
![](https://kenanhancer.com/wp-content/uploads/2023/01/Screenshot-2023-01-02-at-10.25.22-1024x372.png)
If you need to iterate on each type in Union Type, then Distributive Conditional Type (with extends
keywod) needs to be used.
![](https://kenanhancer.com/wp-content/uploads/2023/01/Screenshot-2023-01-02-at-10.27.17-1024x314.png)
To avoid distributive behaviour in Distibutive Conditional Type, surround each side of extends
keyword with square brackets.
![](https://kenanhancer.com/wp-content/uploads/2023/01/Screenshot-2023-01-02-at-10.28.44-1024x289.png)
keyof
doesn't work with Union Type, so we have to iterate in Union Type to pick fields of each type.
![](https://kenanhancer.com/wp-content/uploads/2022/12/Screenshot-2022-12-31-at-16.59.42-1024x264.png)
When Distributive Conditional Type is used, it looks like below;
![](https://kenanhancer.com/wp-content/uploads/2022/12/Screenshot-2022-12-31-at-17.02.40-1024x236.png)
Inferring an object field type with infer
keyword doesn't work for Union Type, so it shows never as below.⬇️
![](https://kenanhancer.com/wp-content/uploads/2022/12/Screenshot-2022-12-31-at-17.12.24-1024x386.png)
When Distributive Conditional Type is used, it looks like below;
![](https://kenanhancer.com/wp-content/uploads/2022/12/Screenshot-2022-12-31-at-17.14.09-1024x311.png)