Documentación en React, usar TypeDoc para generar documentación usando comentarios JSDoc

Tiempo de lectura: 2 minutos

Para generar documentación automáticamente de tu librería de React usando TypeScript, puedes usar una herramienta como TypeDoc.

TypeDoc genera documentación a partir de los comentarios JSDoc en tu código y los tipos de TypeScript.

Pasos para Generar Documentación con TypeDoc

1. Instalar TypeDoc:
   Primero, necesitas instalar TypeDoc y sus dependencias. Puedes hacerlo ejecutando:

   npm install --save-dev typedoc

2. Agregar Comentarios JSDoc:
   Asegúrate de que tu código esté bien documentado con comentarios JSDoc. Por ejemplo, en tu componente BadgeCustom, podrías añadir comentarios como:

   /**
    * Componente que muestra una etiqueta con un texto y un icono.
    *
    * @param {Object} props - Propiedades del componente.
    * @param {string} props.texto - El texto que se mostrará en la etiqueta.
    * @param {JSX.Element} [props.icon] - Un icono opcional que se mostrará en la etiqueta.
    * @param {string} [props.backgroundColor] - Color de fondo de la etiqueta.
    * @param {string} [props.color] - Color del texto de la etiqueta.
    * @returns {JSX.Element} El componente BadgeCustom.
    */
   function BadgeCustom({ texto, icon, backgroundColor = white, color = primary }: Props): JSX.Element {
       ...
   }

3. Agregar un Script en package.json:
   Agrega un script en tu package.json para ejecutar TypeDoc. Puedes hacerlo así:

   "scripts": {
       "build": "microbundle",
       "docs": "typedoc --out docs src/index.tsx"
   }

Aquí --out docs indica que la documentación se generará en una carpeta llamada docs.

4. Ejecutar el Script de Documentación:
   Ahora puedes ejecutar el comando para generar la documentación:

   npm run docs

Esto generará la documentación en formato HTML en la carpeta docs.

5. Ver la Documentación:
   Abre la carpeta docs y busca el archivo index.html en tu navegador para ver la documentación generada.

Opciones Adicionales

• Configuración de TypeDoc: Puedes crear un archivo de configuración typedoc.json para personalizar la generación de documentación. Aquí hay un ejemplo básico:

  {
    "out": "docs",
    "includeDeclarations": true,
    "excludePrivate": true,
    "theme": "default"
  }

• Temas y Plugins: TypeDoc también soporta diferentes temas y plugins que puedes explorar para personalizar aún más la apariencia de tu documentación.