Skip to content

JSX bug when combining union and intersection types #15355

Closed
@whatisaphone

Description

@whatisaphone

TypeScript Versions: 2.2.2, and the 2.3.0 mistakenly released last week

Code

import * as React from 'react';
import { ComponentClass, StatelessComponent } from 'react';

export type ComponentType<P> = ComponentClass<P> | StatelessComponent<P>;

export function withProps<P1, P2>(Component: ComponentType<P1 & P2>, props1: P1) {
  return (props2: P2) => <Component {...props1} {...props2} />;
}

Expected behavior:

Successful compilation.

Actual behavior:

TS2324: Property 'children' is missing in type '(IntrinsicAttributes & IntrinsicClassAttributes<Component<P1 & P2, ComponentState>> & Readonly<{ ...'.

Seems to me that this should be possible, since separate functions for each half of the union type pass the typechecker successfully:

function withProps2<P1, P2>(Component: StatelessComponent<P1 & P2>, props1: P1) {
  return (props2: P2) => <Component {...props1} {...props2} />;
}

function withProps3<P1, P2>(Component: ComponentClass<P1 & P2>, props1: P1) {
  return (props2: P2) => <Component {...props1} {...props2} />;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs More InfoThe issue still hasn't been fully clarified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions