No validation in JSX when using template string index signatures

Playground Link

Here’s the shortest example:

import * as React from "react";

interface Props {
    foo: string;
    bar: number;
    [dataProp: `data-${string}`]: string;
}

function Yadda(props: Props) {
    return <div />;
}

let props: Props = {
    foo: "",
    bar: 0,
    "data-yadda": 42,
};

let x = <Yadda foo="hello" bar={42} data-yadda={42} />;

Expected: TypeScript should error on data-yadda, just as if we had explicitly declared a data-yadda property in Props, or if we had used a string index signature. Actual: JSX dashed properties are exempt from these checks on the target object if a corresponding property doesn’t exist.

My expectation is that if an index signature exists, and a property should be covered by that index signature, then TypeScript should check that the property is compatible with that index signature.

Here’s a longer example that could be used in tests.

import * as React from "react";

interface Props {
    foo: string;
    bar: number;
    [dataProp: `data-${string}`]: string;
}

function Yadda(props: Props) {
    return <div />;
}

// Errors as expected on data-yadda. ✅
let propsObj1: Props = {
    foo: "",
    bar: 0,
    "data-yadda": 42,
};

// Should error on data-yadda, does not. ❌
let x = <Yadda foo="hello" bar={42} data-yadda={42} />;

/////////

let propsObj2 = {
    foo: "",
    bar: 0,
    "data-yadda": 42,
};

// Should error on data-yadda, does not. ❌
let y = <Yadda {...propsObj2} />

// Errors as expected on data-yadda. ✅
propsObj1 = propsObj2;

[DanielRosenwasser]

@dzearing @jasongore

[ahejlsberg]

The bananas behavior is because we ignore JSX attributes with dashed names in relationship checking, but then fail to ignore them in error elaboration. That’s a pretty simple fix.