Search Terms
Mapped Type Union
Suggestion
This might be a bug or an intentional consequence of the original design, but mapped types do not distribute over union types. The example below demonstrates what happens:
typeFoo={x: false;foo?: string}typeBar={x: true;foo: string}typeFooOrBar=Foo|BartypeMappedFooOrBar=Pick<FooOrBar,keyofFooOrBar>// the type of MappedFooOrBar will be { x: boolean; foo: string | undefined }// note how foo is now required even with x = false// and also how you're now allowed to set foo = undefined even with x = trueUse Cases
Higher order components that receive components whose props are union types.
This usually is not a problem but it is a problem if you are going to use Pick (or Omit) on their props. This is already a problem with react-redux's connect for example.
Examples
typeFoo={x: false;foo?: string}typeBar={x: true;foo: string}typeFooOrBar=Foo|Bar// input is a union type so this should distributetypeMappedFooOrBar=Pick<FooOrBar,keyofFooOrBar>// should be equivalent to a MappedFooOrBar that distributes over its inputtypeMappedFooBar=Pick<Foo,keyofFooOrBar>|Pick<Bar,keyofFooOrBar>Checklist
My suggestion meets these guidelines:
Search Terms
Mapped Type Union
Suggestion
This might be a bug or an intentional consequence of the original design, but mapped types do not distribute over union types. The example below demonstrates what happens:
Use Cases
Higher order components that receive components whose props are union types.
This usually is not a problem but it is a problem if you are going to use
Pick(orOmit) on their props. This is already a problem withreact-redux'sconnectfor example.Examples
Checklist
My suggestion meets these guidelines: