How can I make sure that TS is type checking all available properties of a component? The moment one property is incorrect, the rest of the "upcoming" props are not checked anymore - at least I don't see an error shown in my IDE (Webstorm).
Also see code example: TS Playground
I encountered several "issues" or risky moments where one is using @ts-ignore
and/or @ts-expect-error
. It leads to false positives as it doesn't show you any error anymore although you only ignored certain ones, but indeed not all of them.
I reported a TS bug about this but it is actually intended behavior, that e.g. @ts-expect-error
is running after all the type-checking. (see: https://github.com/microsoft/TypeScript/issues/49972)
Here the code you can try it out on your own:
import { React, FunctionComponent } from 'react'
export const MyComponent: FunctionComponent<{
validProp: string
}> = (props) => {
return <>MyComponent</>
}
export const MyComponent2: FunctionComponent<{}> = () => {
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
/>
</>
)
}
But, I still see issues with this. How can I make sure that TS is complaining about other wrong props although the previous incorrect prop has been ignored?
One "solution" might be only using @ts-expect-error
at the end of all component prop definition, but how to ensure it is always ok and no-one is changing the order unintentionally so that other incorrect props are potentially ignored in the future?
I didn't find something according to my question. The only topic I found is this. But also here, the problems are still present, so I can actually not really agree with those solutions provided there. How can I declare/ignore a missing JSX type?
Where can I improve? Is this a limitation that I can't work around?