TypeScript Union Type and Distributive Conditional Types

When conditional types act on a generic type, they become distributive when given a union type.

So, in order to support Union Type, user Conditional Type because it works as loop.

Generic Type with Single Type without Distributive Conditional Type

Generic Type with Union Type without Distributive Conditional Type (This doesn't work)

Notice that conditional type is not use in line 96 so ObjectFieldNames function couldn't retrieve field names in line 102.

Generic Type with Union Type and Distributive Conditional Type

You can think Union type as array, so conditional type will iterate for each type in Union.

For example, notice that PersonType | UserType is used as Union Type in line 113, and field names of both types are listed in Popup window as shown in below screenshot.

PersonType | UserType | EventType is used as Union Type in line 115, so Popup window showed more fields in the following screenshot.

for example PersonType | UserType | EventType, then ObjectFieldNames<T> is keyof PersonType | keyof UserType | keyof EventType

Leave a Reply