no-unused-prop-types returns false positive when destructuring props cast to a different type

[kdmadej]

Sample Code

const propTypes = {
  foo: PropTypes.number.isRequired,
};

type Props = PropTypes.InferProps<typeof propTypes>;

const Foo: React.FC<Props> = (props) => {
  const {
    foo,
  } = props as any; // works if `as any` assertion is removed

  return (
    <>{foo}</>
  );
};

Issue

The linter throws an error: 'foo' PropType is defined but prop is never used even tho the prop is used.

Expected

The linter should not care about props being asserted to be of a different type. If an assertion is made it's most likely for a good reason and the actual prop is still referenced inside the component (no matter its type).

[ljharb]

Although any use of any defeats the entire purpose of using TypeScript, I assume if you do as string or similar you see the same problem - in which case it seems like a straightforward bug.

[kdmadej]

Yup I should've made it more clear in the example that any kind of assertion causes a failure. I encountered the behaviour when casting to a generic that makes use of defaultProps to consider those props that have a default value to be non-nullable, any was just the first thing that came to my mind when writing a sample 😉

I'd be more than happy to try and prepare a PR but I'd need some guidance regarding where to start – I don't have any experience with eslint internals, neither its plugin ecosystem 😅

[ljharb]

In this case, I'd follow these rough steps:

1. add failing test cases in https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/no-unused-prop-types.js and possibly also in https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/no-unused-state.js
2. look at the rule implementation: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js
3. find https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L67-L81 and figure out if it's being picked up and improperly noted as false, or if it's not being picked up at all
4. if not being picked up at all, grep for usedPropTypes and end up here: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/util/usedPropTypes.js

[kdmadej]

Thanks! I'll have a go at it later this week 👍