fix(react-intl): support union component prop types in injectIntl (#…

…3983)

packages/react-intl/src/components/injectIntl.tsx

@@ -27,7 +27,22 @@ export type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
   [k in IntlPropName]: IntlShape
 }
 
-export type WithIntlProps<P> = Omit<P, keyof WrappedComponentProps> & {
+/**
+ * Utility type to help deal with the fact that `Omit` doesn't play well with unions:
+ * - https://github.com/microsoft/TypeScript/issues/31501
+ * - https://github.com/microsoft/TypeScript/issues/28339
+ *
+ * @example
+ *      DistributedOmit<X | Y, K>  -->  Omit<X, K> | Omit<Y, K>
+ */
+export type DistributedOmit<T, K extends PropertyKey> = T extends unknown
+  ? Omit<T, K>
+  : never
+
+export type WithIntlProps<P> = DistributedOmit<
+  P,
+  keyof WrappedComponentProps
+> & {
   forwardedRef?: React.Ref<any>
 }
 

packages/react-intl/tests/unit/react-intl.tsx

@@ -110,5 +110,23 @@ describe('react-intl', () => {
       // This test only need to pass the type checking.
       ;<Test />
     })
+
+    it('injectIntl works with union prop types', () => {
+      type TestProps = {intl: ReactIntl.IntlShape; base: string} & (
+        | {type: 'a'; text: string}
+        | {type: 'b'; value: number}
+      )
+
+      class _Test extends React.Component<TestProps> {
+        render() {
+          return null
+        }
+      }
+
+      const Test = ReactIntl.injectIntl(_Test)
+
+      // This test only need to pass the type checking.
+      ;<Test base="base" type="a" text="text" />
+    })
   })
 })