Estoy convirtiendo mis archivos de proyecto de jsx a tsx. Para proptypes normales, puedo proporcionar un equivalente en la interfaz. Pero para Proptypes personalizados no puedo hacer lo mismo. a continuación encontrará el escenario de ejemplo para tener una idea.
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; interface AppContainerProps { primaryValue: Error | null; secondaryValue: Error | null; } const AppContainer = ({ primaryValue = null, secondaryValue = null, }: AppContainerProps) => { return <div>{/*my component*/}</div>; }; export default AppContainer;¿Cómo implemento customPropCheck en mi tsx? ¿Hay alguna manera o tengo que copiar la misma implementación de propType en mi archivo tsx, es decir:
AppContainer.propTypes = { primaryValue: customPropCheck, secondaryValue: customPropCheck }TypeScript puede ayudar con el aspecto de tipo de prop-types , pero si desea que se apliquen comprobaciones personalizadas como la suya cuando se especifican los accesorios (en lugar de más tarde cuando se representa el componente), todavía necesita prop-types para hacerlo.
Por lo que puedo decir, no hay ningún problema especial para usarlo. Los tipos de parámetros en customPropCheck son AppContainerProps , keyof AppContainerProps y string respectivamente.
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; };Luego simplemente asigna la función (esperaba que esto fuera un problema, pero no parece serlo):
AppContainer.defaultProps = { primaryValue: null, secondaryValue: null, }; AppContainer.propTypes = { primaryValue: customPropCheck, secondaryValue: customPropCheck, }; La parte defaultProps de eso es conceptualmente redundante, está especificando valores predeterminados en la desestructuración en los accesorios de su componente, pero nuevamente, esos se aplicarán una vez cuando se crea el elemento, no repetidamente cuando se procesa el componente, por lo que podría haber un argumento para mantenerlo (aunque su control personalizado no se basa en él, verá undefined en lugar de null , pero sus controles no se preocupan por la distinción).