JSX and React.createElement are not treated equally

[karol-majewski]

TypeScript Version: 3.3.0-dev.20181229

Relevant types: @types/[email protected], @types/[email protected]

Search Terms:

• JSX
• JSX resolution
• React
• React.createElement
• LibraryManagedAttributes

Code

import * as React from 'react';

export function withDefaults<T extends React.ComponentType<any>, U extends Partial<React.ComponentProps<T>>>(
  Component: T,
  defaults: U,
): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof U> & Partial<U>> {
  return props => <Component {...defaults} {...props} />;
}

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

However, when we use React.createElement directly:

-  return props => <Component {...defaults} {...props} />;
+  return props => React.createElement(Component, { ...defaults, ...props });

the type-checking passes successfully.

Expected behavior:

No error. The two are supposed to be equivalent. The code works in runtime.

Actual behavior:

Compile-time error is reported on line 7:

Type 'U & Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, keyof U>> & Partial<U> & { children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, any>'.
  Type 'U & Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, keyof U>> & Partial<U> & { children?: ReactNode; }' is not assignable to type 'LibraryManagedAttributes<T, any>'.

Playground Link:

I created a StackBlitz demo, but it refuses to use the locally installed version of TypeScript, so there is an unrelated error reported for ...defaults.

[DanielRosenwasser]

Duplicate of #14729