3

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).

enter image description here

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?

Nico W.
  • 103
  • 1
  • 7

0 Answers0