DEV Community

Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

Como Criar e Publicar Pacotes TypeScript no NPM

Image description
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


Enter fullscreen mode Exit fullscreen mode

Verifique se tudo está instalado corretamente:



node -v
npm -v
tsc -v


Enter fullscreen mode Exit fullscreen mode

2. Criando o Projeto

Comece criando um diretório para o seu projeto:



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


Enter fullscreen mode Exit fullscreen mode

Inicialize um projeto Node.js:



npm init


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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/**/*"]
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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();
}


Enter fullscreen mode Exit fullscreen mode

5. Compilando o Código

Compile o TypeScript para JavaScript:



tsc


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode
  1. Utilize a função no projeto de teste:


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

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode
  1. Publicação

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

Agora, compile e publique:



   npm run build
   npm publish


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode



  1. 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?

Top comments (0)