A medida que TypeScript gana popularidad, muchos desarrolladores crean paquetes de tipado estático para aprovechar los beneficios que ofrece el lenguaje. En esta publicación, cubriremos el proceso de creación y publicación de un paquete NPM usando TypeScript.

1. Configurando el entorno

Asegúrate de tener Node.js, NPM y TypeScript instalados. Puede instalar TypeScript globalmente con:

npm install -g typescript

Comprueba que todo esté instalado correctamente:

node -v
npm -v
tsc -v

2. Creando el proyecto

Comienza creando un directorio para tu proyecto:

mkdir meu-pacote-typescript
cd meu-pacote-typescript

Inicializar un proyecto Node.js:

npm init

Esto creará el archivo package.json donde podrá definir la información básica del paquete.

3. Configurando TypeScript

Ahora, inicializa un proyecto de TypeScript:

tsc --init

Esto creará un archivo tsconfig.json. Edítelo según sea necesario, pero una configuración común es la siguiente:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

Aquí, estamos configurando el compilador TypeScript para generar código ES6, con módulos CommonJS e incluir declaraciones de tipo (declaración: verdadera). El código compilado se colocará en el directorio dist.

4. Escribir el código

Crea un directorio src y dentro de él un archivo index.ts:

mkdir src
touch src/index.ts

En el archivo index.ts, escriba el código de su paquete. Creemos una función simple para convertir cadenas a mayúsculas:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. Compilando el Código

Compilar TypeScript en JavaScript:

tsc

Esto generará los archivos JavaScript y escribirá declaraciones en el directorio dist.

6. Probar el paquete localmente

Para probar tu paquete, puedes instalarlo localmente en otro proyecto:

1. En el directorio de su proyecto de prueba, ejecute:

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. Utilice la función en el proyecto de prueba:

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

Esto garantiza que tanto el código JavaScript como las declaraciones de tipo funcionen correctamente.

7. Publicar en NPM

Si todo funciona correctamente, estás listo para publicar tu paquete.

1. Inicio de sesión de NPM

Si aún no tienes una cuenta NPM, crea una e inicia sesión:

   npm login

1. Publicación

Antes de publicar, agregue un script de compilación a package.json:

   "scripts": {
     "build": "tsc"
   }

Y agregue la ruta de salida en package.json:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

Ahora compila y publica:

   npm run build
   npm publish

Si el nombre del paquete ya existe, deberás elegir un nombre nuevo.

8. Actualización del paquete

Para publicar una nueva versión, cambie la versión en package.json, ejecute npm run build nuevamente y publique:

npm publish

9. Mejores prácticas

• Documentación: Incluya un archivo README.md que explique cómo usar su paquete.
• Pruebas: escriba pruebas utilizando marcos como Jest para garantizar que el código funcione como se esperaba.
• Linting: utilice herramientas como ESLint y Prettier para mantener la calidad del código.
• Versionamiento: Siga a SemVer para versionar su paquete.

Conclusión

La creación y publicación de paquetes TypeScript en NPM no solo mejora la calidad del código, sino que también brinda beneficios de escritura a quienes consumen su paquete. Si sigue esta guía, estará listo para compartir sus soluciones con la comunidad de JavaScript y TypeScript, contribuyendo a un ecosistema de desarrollo más sólido y sólido.

Ahora que conoces el proceso, ¿qué tal si comienzas a crear tu próximo paquete TypeScript?