Estoy documentando mis componentes React Native , pero no sé cómo hacerlo correctamente.
Para la generación de documentación, estoy usando jsdoc/better-docs , que supuestamente puede recopilar los comentarios que dejas en tus PropTypes e incluirlos en la documentación. Pero… por temas de incompatibilidad, no es posible llevar a cabo esta estrategia en React Native, y, por tanto, los PropTypes no están incluidos en la documentación .
¿Cómo documenta este componente React usando JSDOC?
/** * ?? */ function Cat({ name, color = "#000" }) { return <View />; } Cat.propTypes = { name: PropTypes.string.isRequired, color: PropTypes.string, };Estaba haciendo lo siguiente:
/** * The cat properties. * * @typedef {object} Props * @property {string} name - The cat name. * @property {string} [color="#000"] - The cat color. */ /** * Cat component. * * @type {React.FC<Props>} * @returns {React.ReactElement} The cat. */ function Cat({ name, color = "#000" }) { return <View />; } Cat.propTypes = { /** The cat name. */ name: PropTypes.string.isRequired, /** The cat color. */ color: PropTypes.string, };Pero siento que prop-types es inútil después de agregar las definiciones de tipo (?).
¿Cómo documenta sus componentes de reacción?
El camino a seguir es usar InferProps de prop-types . Este método solo está disponible para TypeScript :( y no lo estoy usando... en su lugar, estoy combinando JSDoc y PropTypes en mi proyecto para obtener algunos "comportamientos de TypeScript" en la experiencia de desarrollo y generar automáticamente mi documentación.
PERO HAY UNA SOLUCIÓN SIN MECANOGRAFÍA
Simplemente configure su JSDoc como lo describí aquí: JSDoc: error de reutilización de definiciones de tipo (no se puede encontrar el nombre 'nombre de tipo')
Ahora, en su código, simplemente haga lo siguiente:
componentes/gato/propTypes.js :
... export const CatPropTypes = { /** The cat data. */ data: CatDataShape, /** The cat name. */ name: PropTypes.string.isRequired, /** The cat color. */ color: PropTypes.string, };componentes/gato/Cat.js :
import React from "react"; import { View } from "react-native"; import { InferProps } from "prop-types"; import { CatPropTypes } from "./propTypes"; // <----- /** * Cat component. * * @type {React.FC<InferProps<import("./propTypes").CatPropTypes>>} <---- JSDoc is in TypeScript mode! FANTASTIC! :D * @returns {React.ReactElement} The cat. */ function Cat({ name, color = "#000" }) { return <View />; } Cat.propTypes = CatPropTypes; // <-----¡Ahora todo funciona a la perfección y no hay razón para mantener definiciones de tipo JSDoc inútiles! :DDDDDD