Missing error after spreading generic props into JSX

[OliverJAsh]

TypeScript Version: 3.2.2

Search Terms:

Code

type Component<P> = (props: P) => any;

const myHof = <ComposedComponentProps extends any>(
 ComposedComponent: Component<ComposedComponentProps>,
) => {
 type WrapperComponentProps = ComposedComponentProps & { myProp: string };
 declare const WrapperComponent: Component<WrapperComponentProps>;

 declare const props: ComposedComponentProps;

 // Expected no error, got none - good
 WrapperComponent({ ...props, myProp: '1000000' });
 // Expected error, got one - good
 WrapperComponent({ ...props, myProp: 1000000 });
}

However, when I try to do the same with React (.tsx):

import React from 'react';

const myHoc = <ComposedComponentProps extends any>(
 ComposedComponent: React.ComponentClass<ComposedComponentProps>,
) => {
 type WrapperComponentProps = ComposedComponentProps & { myProp: string };
 declare const WrapperComponent: React.ComponentClass<WrapperComponentProps>;

 declare const props: ComposedComponentProps;

 // Expected no error, got none - good
 <WrapperComponent {...props} myProp={'1000000'} />;
 // Expected error, but got none - bad!
 <WrapperComponent {...props} myProp={1000000} />;
};

[weswigham]

Looks like the issue is caused by the extends any. As a workaround, use extends unknown (to which it should behave identically to) until we have a fix in, instead.

[OliverJAsh]

Aha, thanks. The reason I do the extends btw is because it's needed for arrow functions in .jsx/.tsx.

[weswigham]

Oliver Joseph Ash (@OliverJAsh) A trailing comma on the type argument list should disambiguate as well.