如何将反应jsx中的自定义proptype转换为typescript

Question

I am converting my project files from jsx to tsx. For normal proptypes, I am able to provide equivalent in interface. But for custom Proptypes I am unable to do the same. please find below the example scenario to get an idea.

AppContainer.jsx

    const AppContainer = (props) => {
  return <div>{/*my component*/}</div>;
};

const customPropCheck = (props, propName, componentName) => {
  if (
    (props.primaryValue && !props.secondaryValue) ||
    (!props.primaryValue && props.secondaryValue)
  ) {
    return new Error(`Error for ${componentName} `);
  }
  return null;
};
AppContainer.defaultProps = {
  primaryValue: null,
  secondaryValue: null,
};

AppContainer.propTypes = {
  primaryValue: customPropCheck,
  secondaryValue: customPropCheck,
};

export default AppContainer;

AppContainer.tsx

interface AppContainerProps {
  primaryValue: Error | null;
  secondaryValue: Error | null;
}

const AppContainer = ({
  primaryValue = null,
  secondaryValue = null,
}: AppContainerProps) => {
  return <div>{/*my component*/}</div>;
};

export default AppContainer;

How do i implement customPropCheck in my tsx? Is there any way Or do I have to copy same propType implementation in my tsx file ie:

AppContainer.propTypes = {
    primaryValue: customPropCheck,
    secondaryValue: customPropCheck 
} 

Answer 1

As far as I can tell, there's no problem just doing it. The types of the parameters in customPropCheck are AppContainerProps , keyof AppContainerProps , and string respectively:

const customPropCheck = (props: AppContainerProps, propName: keyof AppContainerProps, componentName: string) => {
    if (
        (props.primaryValue && !props.secondaryValue) ||
        (!props.primaryValue && props.secondaryValue)
    ) {
        return new Error(`Error for ${componentName} `);
    }
    return null;
};

Then you just assign to the function (I was expecting this to be a problem, but it doesn't seem to be):

AppContainer.defaultProps = {
    primaryValue: null,
    secondaryValue: null,
};

AppContainer.propTypes = {
    primaryValue: customPropCheck,
    secondaryValue: customPropCheck,
};

Playground link