javascript - Generar PropTypes a partir de TypeScript

Estoy usando React con TypeScript. También estoy usando PropTypes. TypeScript está destinado a la verificación de tipos en tiempo de compilación, mientras que PropTypes valida las props pasadas en tiempo de ejecución (modo desarrollo). Así que me encontré escribiendo tipos dos veces. Tanto TypeScript como PropTypes. Por ejemplo, el componente ListingsList:

interface ListingsListProps {
    listings: Listing[];
    height: number;
    width: number;
    rowHeight: number;
    forwardedRef?: Ref<List>;
    className?: string;
}

const ListingsList: FunctionComponent<ListingsListProps> = props => {
...
...
};

ListingsList.propTypes = {
    listings: PropTypes.arrayOf(listingPropType.isRequired).isRequired,
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    rowHeight: PropTypes.number.isRequired,
    forwardedRef: PropTypes.shape({ current: PropTypes.instanceOf(List).isRequired }),
    className: PropTypes.string,
};

Cada vez que cometo un error (definiendo una propiedad de manera diferente en PropTypes y en TypeScript), obtengo un error de TypeScript. A veces realmente no sé cómo definir el PropType. Por ejemplo, cuando paso la propiedad History de 'history'. No quiero definir el PropType de History yo mismo porque tiene una estructura complicada. He visto que hay proyectos que generan TypeScript a partir de PropTypes, pero realmente no me gusta porque TypeScript es mucho más fuerte, puedo definir tipos más detallados. Estoy buscando una manera de generar PropTypes a partir de TypeScript, y creo que esta es una característica imprescindible para los desarrolladores de React.

Respuesta #1

Puedes usar babel-plugin-typescript-to-proptypes. Requiere ya sea el plugin @babel/plugin-syntax-jsx o el preset @babel/preset-react.

Usa npm install --save-dev babel-plugin-typescript-to-proptypes para instalar.

Y aquí hay un ejemplo de babel.config.js:

const plugins = [];

if (process.env.NODE_ENV !== 'production') {
  plugins.push('babel-plugin-typescript-to-proptypes');
}

module.exports = {
  // Required
  presets: ['@babel/preset-typescript', '@babel/preset-react']
  plugins,
};