Passing additional props via JSX is an error in TS 2.3.

[danvk]

TypeScript Version: 2.3.2

Code

interface ChildProps { val: number; }
interface ParentProps { val: number; str: string; }

const ChildComponent = (props: ChildProps) => <div>{props.val}</div>;

const ParentComponent = (props: ParentProps) =>
     <ChildComponent {...props} />;
           // ERROR: ~~~~~~~~~~ Property 'str' does not exist on type 'IntrinsicAttributes & ChildProps'.

function child(props: ChildProps) {}
function parent(props: ParentProps) {
  child(props);  // OK
}

Expected behavior:

I updated my project from TypeScript 2.2 --> 2.3.2 and began getting errors along these lines.

I'd expect passing props via JSX to be similar to passing a parameter to a function: it's OK so long as the parameter is compatible with the type that the function specifies. But this doesn't seem to be the case with JSX. The attributes you pass must match the Props type precisely. No additional attributes are allowed.

But the React runtime is fine with additional attributes and this makes it difficult to use spread props.

This might be by design, see #10393. But it's strange that the analogy with passing parameters to a function breaks down, especially since this is exactly how JSX is implemented.

cc @jacobbaskin

Actual behavior:

[yuit]

This is a duplicate for #15463 ...we have a fix in nightly and will have it for 2.3.3 as well

[robin-anil]

@yuit Any eta for 2.3.3 ? Looks like it fixes a large swath of issues we have been facing.

[yuit]

@r-tock 2.3.3 should be out next week

[JoshGlazebrook]

Was this pushed out in 2.3.3? I'm having this issue with 2.3.4.