Type error not indicated when spreading into a JSX component whose props type is defined as interface

[wereHamster]

Bug Report

🔎 Search Terms

react, component props, interface type, spread

🕗 Version & Regression Information

Bug present in 3.3.3 (oldest version available on Playground), as well as Nightly.

⏯ Playground Link

Playground link with relevant code

💻 Code

import * as React from 'react'

// Change interface to a type declaration and the bug disappears.
interface Props {}
// type Props = {}

// Change 'Props' => '{}' (ie. inline the type) and the bug disappears.
function Component(_: Props) { 
    return <div>C2</div>
}

export function Bug() {
    const props = { opt: "1" } as const

    // Should be a type error, since Component doesn't accept 'opt' prop
    return <Component {...props} />
}

🙁 Actual behavior

No error is indicated.

Error is indicated correctly when interface is changed to a type declaration, or the type is inlined.

🙂 Expected behavior

TypeScript should indicate a type error since Component doesn't accept the 'opt' prop.

[MartinJohns]

Interfaces are subject to declaration merging. Types and inline types are not. edit: While this statement is right, it is unrelated to this issue.

[wereHamster]

Are you saying in my code snippet there is another Props interface defined somewhere which defines a opt field? If so, where? How do I find out?

[MartinJohns]

I'm saying due to declaration merging a new property could be added at any time, that's why TypeScript does not report an error.

If you don't want this behavior, then you can use type instead of interface. edit: While this statement is right, it is unrelated to this issue.

[wereHamster]

Wait, so TS allows extending private interfaces that are not exported from modules? And therefore it speculatively assumes that Props ~ any since it can be arbitrarily extended?

Also, why does TS indicate a type error in <Component opt="1" />? In both cases, we are passing a (at compile time) known prop to a component which (due tu declaration merging) accepts, well, basically anything. I'm confused.

[wereHamster]

Hm, TS treats an empty interface differently, somehow? If I add a dummy field to Props now suddenly TS reports an error:

import * as React from 'react'

interface Props {
    unused?: number
}

function Component(_: Props) { 
    return <div>C2</div>
}

export function Bug() {
    const props = { opt: "1" } as const
    return <Component {...props} /> // <- Type '{ opt: "1"; }' has no properties in common with type 'IntrinsicAttributes & Props'
}

[MartinJohns]

I might be confusing the issue with Why are all types assignable to empty interfaces?, but I would have expected type aliases and inline types to behave the same. edit: This statement is unrelated to this issue.

[wereHamster]

Ok, I think my problem is not related to React/JSX but to interfaces, spread, and extra fields:

function f(_: { foo: number }) { 
    return 1;
}

function g(props: { bar?: string }) {
    f({ foo: 1 }) // TS: pass;
    f({ foo: 1, bar: "1" }) // TS: error; due to extra 'bar' prop
    f({ foo: 1, bar: "1", ...props }) // TS: pass; weird, I'd have expected a type error here!
    f({ foo: 1, bar: "1", baz: "1", ...props }) // TS: error; because extra 'baz' field, but 'bar' still silently accepted.
}

[RyanCavanaugh]

There are a lot of subtle things here but this isn't supposed to be one of them.

[pamply]

Facing a similar issue. Passing spread props isn't get catch. I'm surprised this is happening in old versions

Test in version 3.3.3

[smashercosmo]

This issue is not only applicable to interfaces. Same behaviour with types
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChSYBPMJOABRzAGc4BeOAb1LjgBsUARkl4AuOExhRgAOwDmpAL7lMAV2kZgEaXADCuSNKTSYACjCMmYhhGYBKTtzhotEzn0HC4CtnHM2mjkQwKlDaJo48ADwAJsAAbgB8HPxCvAqRAPSxiY62ispqGlr0KETGeuBaRqb2XDzO0q7OlYbG1sw+HO6pYvgC-PgANOK4SO29ABbCvBD4XoFIwaFwkRUG1ZwAdNvN620W3hkJ+UA

[Fi1osof]

My Playground with same error.
I think this is TS's bug.

type A = {
    test: number
}

const a: A = {
    test: 11,

    // Where Error?
    ...{
        sds: 23,
    },
    // OK: Error
    sds: 23,
}

const b: A = {
    test: 11,

    // Where Error?
    ...{
        sds: 23,
    },
}

const c: A = {
    test: 11,
    // OK: Error
    sds: 23,
}