TypeScript 的 Eslint 反应/道具类型错误

Question

I'm getting the Eslint error: 'age' is missing in props validation eslint (react/prop-types) when using extends for interface for React components using the below seemingly valid example:

interface SuperProps {
  age: number;
}

interface TestProps extends SuperProps {
  name: string;
}

const Test = ({ name, age }: TestProps) => {
  return (
    <p>
      {name}: {age}
    </p>
  );
};

Is this a bug or a feature that I haven't fully grasped?

Answer 1

In case anyone stumbles upon this question, as mentioned in the question comments there was an issue raised regarding this validation rule here: https://github.com/yannickcr/eslint-plugin-react/issues/2654 .

The issue is closed but it seems it is not resolved. The validation rule can be disabled by adding

'react/require-default-props': 0

to the rules in your eslintrc.js file