Como Criar e Publicar Pacotes TypeScript no NPM

Com o crescimento da popularidade do TypeScript, muitos desenvolvedores estão criando pacotes com tipagem estática para aproveitar os benefícios que a linguagem oferece. Neste post, vamos abordar o processo de criação e publicação de um pacote NPM utilizando TypeScript.

1. Configurando o Ambiente

Certifique-se de ter o Node.js, o NPM e o TypeScript instalados. Você pode instalar o TypeScript globalmente com:

npm install -g typescript

Verifique se tudo está instalado corretamente:

node -v
npm -v
tsc -v

2. Criando o Projeto

Comece criando um diretório para o seu projeto:

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

Inicialize um projeto Node.js:

npm init

Isso criará o arquivo package.json, onde você pode definir as informações básicas do pacote.

3. Configurando o TypeScript

Agora, inicialize um projeto TypeScript:

tsc --init

Isso criará um arquivo tsconfig.json. Edite-o conforme necessário, mas uma configuração comum é a seguinte:

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

Aqui, estamos configurando o compilador TypeScript para gerar código ES6, com módulos CommonJS, e incluir declarações de tipos (declaration: true). O código compilado será colocado no diretório dist.

4. Escrevendo o Código

Crie um diretório src e dentro dele um arquivo index.ts:

mkdir src
touch src/index.ts

No arquivo index.ts, escreva o código do seu pacote. Vamos criar uma função simples para converter strings para maiúsculas:

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

5. Compilando o Código

Compile o TypeScript para JavaScript:

tsc

Isso gerará os arquivos JavaScript e as declarações de tipos no diretório dist.

6. Testando o Pacote Localmente

Para testar o seu pacote, você pode instalá-lo localmente em outro projeto:

1. No diretório do seu projeto de teste, execute:

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

1. Utilize a função no projeto de teste:

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

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

Isso garante que tanto o código JavaScript quanto as declarações de tipos funcionam corretamente.

7. Publicando no NPM

Se tudo estiver funcionando corretamente, você está pronto para publicar seu pacote.

1. Login no NPM

Se ainda não tiver uma conta no NPM, crie uma e faça login:

   npm login

1. Publicação

Antes de publicar, adicione um script de build no package.json:

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

E adicione o caminho de saída no package.json:

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

Agora, compile e publique:

   npm run build
   npm publish

Se o nome do pacote já existir, você precisará escolher um novo nome.

8. Atualizando o Pacote

Para publicar uma nova versão, altere a versão no package.json, execute npm run build novamente, e publique:

npm publish

9. Boas Práticas

• Documentação: Inclua um arquivo README.md explicando como usar o seu pacote.
• Testes: Escreva testes usando frameworks como Jest para garantir que o código funcione conforme esperado.
• Linting: Utilize ferramentas como ESLint e Prettier para manter a qualidade do código.
• Versionamento: Siga o SemVer para versionar seu pacote.

Conclusão

Criar e publicar pacotes TypeScript no NPM não só melhora a qualidade do código, como também oferece benefícios de tipagem para quem consome seu pacote. Ao seguir este guia, você estará pronto para compartilhar suas soluções com a comunidade JavaScript e TypeScript, contribuindo para um ecossistema de desenvolvimento mais forte e robusto.

Agora que você conhece o processo, que tal começar a construir o seu próximo pacote TypeScript?