React ... `@ts-expect-error` in a multi-line JSX leads to false-positive type-checks

[nico-w]

Bug Report

Using @ts-expect-error in a multi-line JSX leads to false-positive type-checks.

🔎 Search Terms

• jsx, ignore, expect, error

🕗 Version & Regression Information

"typescript": "4.5.4" & "typescript": "4.7.4"
I also tried typescript@next (4.8.0-dev.20220720)

This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX.

⏯ Playground Link

Playground link with relevant code

💻 Code

import { React, FunctionComponent } from 'react'

export const MyComponent: FunctionComponent<{
 validProp: string
}> = (props) => {
 return <>MyComponent</>
}

export const MyComponent2: FunctionComponent<{
 validProp: string
}> = (props) => {
 return (
 <>
 <MyComponent
 validProp='validProp'
 invalidProp1
 invalidProp2
 />
 <MyComponent
 validProp='validProp'
 // @ts-expect-error
 invalidProp1
 invalidProp2 // <-- here it should still throw and show me that this prop is invalid
 />
 <MyComponent
 validProp='validProp'
 invalidProp1
 // @ts-expect-error
 invalidProp2
 />
 </>
 )
}

🙁 Actual behavior

Using @ts-expect-error if you want to suppress a warning for e.g. one invalid React component prop is not checking the rest of the other props anymore.

🙂 Expected behavior

Using @ts-expect-error if you want to suppress a warning for e.g. one invalid React component prop should still check the rest of the other props.

[RyanCavanaugh]

ts-expect-error runs after all typechecking has been completed and checks if an error was on that line. It has no effect on which errors get produced; it is not a suppression mechanism in the typechecker but rather a post-processing step you can use.

This is one of the caveats we tried to warn people about in #9448 🤷‍♂️😅

[nico-w]

Ok, very interesting. Thanks for your answer Ryan Cavanaugh (@RyanCavanaugh) ! 😄 Would you mind helping me, finding the right way making sure that all lines of props are getting type-checked then? When I understood you correctly, I need to make sure that typescript is not "stopping" doing a following type-check on all other props and then I could use this suppression in "my correct manner"? Is that correct? 🤔

[RyanCavanaugh]

I don't understand what you're trying to do - are you writing a .d.ts test file?

[nico-w]

No. I'm trying to make my components props as type-safe as possible - with using @ts-expect-error for certain situations in which I want to suppress an expected error for just one prop. But all other props should still get properly type-checked.

Using @ts-expect-error in those situations is risky because it doesn't show you any TS error anymore that would potentially be in that component aside of the one error you wanted to suppress.

In this example, I defined a component MyComponent and it has one valid prop named validProp. That means, whenever this component gets other props passed, it should fail with a TS error. So, in this example it should fail because of two extra props invalidProp1 and invalidProp2. When I'm now suppressing the first invalid prop invalidProp1 with @ts-expect-error, it should - in my opinion - still show me an error for the second invalid prop invalidProp2 ... but it doesn't.

const MyComponent: FunctionComponent<{
 validProp: string
}> = (props) => {
 return <>MyComponent</>
}

[...]

<MyComponent
 validProp='validProp'
 // @ts-expect-error
 invalidProp1
 invalidProp2 // <-- here it should still throw and show me that this prop is invalid
/>

[...]

And from your answer, I may understood it correctly, that I need to make sure that TS is checking all props and not just one at a time. In this screenshot from my IDE you can see that it's only checking the first invalid prop, but stops and doesn't check the second invalid prop. How can I change this? ... and if this is working, then I could potentially use @ts-expect-error to suppress just certain props. How do you think?

Thank you.

Nico

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[vsiao]

Future readers: this is a specific case of #47551 (ie. not limited to JSX expressions)