This content originally appeared on DEV Community and was authored by Lucas Pereira de Souza
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:
- No diretório do seu projeto de teste, execute:
npm install ../caminho-para-o-diretorio-do-seu-pacote/dist
- 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.
- Login no NPM
Se ainda não tiver uma conta no NPM, crie uma e faça login:
npm login
- 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.mdexplicando 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?
This content originally appeared on DEV Community and was authored by Lucas Pereira de Souza
Lucas Pereira de Souza | Sciencx (2024-08-17T20:31:21+00:00) Como Criar e Publicar Pacotes TypeScript no NPM. Retrieved from https://www.scien.cx/2024/08/17/como-criar-e-publicar-pacotes-typescript-no-npm/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.