How to prop check when a function is called from another function?-CodePudding

I am typing to call a function with defaultProptypes to validate the

interface testProps {
  name: string;
  state?: 'ca' | 'ny' | 'fl';
}

Testing.defaultProps = {
  state: 'ca',
};

const Test1 = ({ name }: testProps) => {
  return (
    <div>{name}</div>
)}

export const Testing = ({ name, state }: testProps) => {
  return (
    <>
        <Test1 name={name} />
    </>
  );
};

In the above example, Testing function works well. I am getting errors while passing the name value to Test1 function as typecheck will be performed by 'testProps' but now the value of name is just a string. How can I use the same testProps for Test1 function?

Errors-

'state' PropType is defined but prop is never used                                   react/no-unused-prop-types
  propType "state" is not required, but has no corresponding defaultProps declaration

CodePudding user response：

Typescript is happy with your code but ESlint is not. react/no-unused-prop-types is an eslint error.

You can reuse testProps and make ESLint happy by narrowing Test1's arg type to Pick<testProps, 'name'>.