No validation in JSX when using template string index signatures
See original GitHub issueHere’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;
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
Typescript: No index signature with a parameter of type 'string ...
It says that no index signature with a type of string exists on my object. But I'm sure that it does. What am...
Read more >Documentation - Template Literal Types - TypeScript
Generating mapping types which change properties via template literal strings.
Read more >17.7.0 API Reference - joi.dev
If the schema is a joi type, the schema.validate(value) can be called directly on the type ... Generates a dynamic expression using a...
Read more >TypeScript for React Developers - freeCodeCamp
With TS you will be notified that No overload matches this call which tells you that there is no signature for that component...
Read more >jsx element type does not have any construct or call signatures.ts ...
You are importing google-maps-react library, but you are using the component as if ... loadSuccessErrorDialog: boolean; stripeCardValidationError: string; }.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@dzearing @jasongore
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.