javascript - ¿Cómo puedo agregar soporte para autocompletar nombres de clases en mi biblioteca basada en TypeScript?

He programado una biblioteca simple pero útil llamada CliSpinner.https://github.com/AxeriDev/CliSpinner

El problema es que VScode tiene autocompletado de clases de TypeScript, pero nunca encuentra la mía. Exporto la clase dentro de CliSpinner.ts de la siguiente manera:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();
export default cliSpinner;

cuando empiezo a escribir CliSpi o cliSpi nunca obtengo un resultado coincidente para importar. ¿Cómo logran esto otras bibliotecas y paquetes? Chalk es una librería de js pero aún así tiene esto. Cuando empiezo a escribir chal, aparece chalk y puedo hacer clic para importarlo.

Respuesta #1

Para abordar el problema que estás enfrentando con el autocompletado de VSCode que no reconoce CliSpinner para la importación, la causa raíz radica en cómo estás exportando desde tu CliSpinner.ts. Actualmente, estás exportando una instancia de la clase, lo cual los IDEs como VSCode típicamente no autocompletan de la misma manera que lo hacen con nombres de clases, funciones, etc.

Aquí hay una solución adaptada a diferentes escenarios según tu intención:

Si quieres exportar la clase:

Cambia tu exportación para exportar directamente la clase en sí. Esto está más en línea con las prácticas comunes y con lo que normalmente esperarías que importe una declaración de importación:

export class CliSpinner { ... }

Al hacerlo, cuando los consumidores de su biblioteca quieran usar CliSpinner, podrán importar fácilmente la clase e instanciarla según sea necesario:

import { CliSpinner } from 'path/to/CliSpinner';
const cliSpinner = new CliSpinner();

Si Prefieres Exportar una Instancia Singleton:

A veces, el objetivo es proporcionar una única instancia compartida de una clase que pueda ser utilizada en toda una aplicación, similar a un singleton. Aun así, puedes lograr esto permitiendo la importación directa del tipo de clase cuando sea necesario:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();

export { CliSpinner, cliSpinner as default };

Con este enfoque, estás ofreciendo lo mejor de ambos mundos: la capacidad de que los usuarios importen y utilicen directamente la instancia singleton y la opción de instanciar nuevos objetos CliSpinner si su caso de uso lo requiere.

Consejo adicional:

Asegúrate de que tu configuración de TypeScript esté configurada para generar archivos .d.ts (de declaración) y que estos estén correctamente incluidos en tu paquete. Esta configuración es crucial para ayudar a IDEs como VSCode a proporcionar sugerencias de autocompletado precisas. Puedes asegurarte de que se generen archivos de declaración agregando lo siguiente a tu tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "outDir": "./lib",
    "rootDir": "./src",
  },
  "include": ["src/**/*"]
}

Solo asegúrate de que las rutas reflejen la estructura de tu proyecto.

Después de hacer estos ajustes, es posible que también necesites reiniciar el servidor TS en VSCode (TypeScript: Restart TS server comando) o incluso VSCode mismo para ver que los cambios tengan efecto.

Respuesta #2

El problema es que estás exportando una instancia de CliSpinner, no la clase en sí. Cuando escribes CliSpi o cliSpi, VS Code está buscando clases o funciones exportadas con esos nombres, pero no encontrará ninguna porque solo estás exportando una instancia.

export default class CliSpinner { ... }

Si quieres exportar la clase en sí, deberías hacer:

import CliSpinner from 'cli-spinner-package';
const cliSpinner = new CliSpinner();

Luego, puedes importarlo en otro archivo de esta manera: Si quieres mantener la exportación de la instancia pero también tener la clase disponible para importar, puedes hacer:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();
export { CliSpinner };
export default cliSpinner;

Luego, puedes importar la clase así:

import { CliSpinner } from 'cli-spinner-package';

Y el caso como este: