Você que está começando a aprender a Typescript e se perguntou como integrar essa ferramenta em seus projetos NodeJS. Eu venho aqui lhe guiar em como configurar um bom Setup inicial passo a passo.
Criando o nosso ambiente inicial
Crie em uma pasta/diretório em algum local do seu computador utilizando alguma Interface gráfica ou pelo terminal ( Recomendo você usar o "Git Bash" se estiver usando Windows ).
mkdir node-with-typescript
cd node-with-typescript
Com seu editor de código preferido, abra a pasta/diretório ( Eu irei utilizar o Visual Studio Code ).
# Você tem que está dentro da pasta "node-with-typescript"
code .
por fim, inicialize seu projeto com o NPM ( ou com Yarn se preferir ).
# NPM
npm init -y
# yarn
yarn init -y
Você verá seu package.json criado. Ótimo, isso é o ponto de start para nosso setup 🚀.
Configurando o Typescript no projeto
Agora que temos nosso setup inicializado com Node, precisamos instalar o Typescript e configurar o ambiente para que o Node possa entende-lo.
Vamos começar instalando o Typescript e suas tipagens para o Node
# NPM
npm i -D typescript @types/node
# yarn
yarn add -D typescript @types/node
Depois, crie o arquivo tsconfig.json na raiz do seu projeto com as seguinte configurações:
{
"exclude": ["node_modules", "dist"],
"include": ["src"],
"compilerOptions": {
"target": "ES2020",
"isolatedModules": true,
"moduleResolution": "Node",
"resolveJsonModule": true,
"baseUrl": "./",
"allowSyntheticDefaultImports": true,
"strict": true,
"outDir": "./dist",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"sourceMap": true,
"lib": ["ESNext"],
"strictPropertyInitialization": false,
"skipLibCheck": true,
"paths": {},
"module": "CommonJS",
"noImplicitAny": false,
"noFallthroughCasesInSwitch": false,
"typeRoots": ["./src/@types", "./node_modules/@types"]
}
}
OBS: Se você quiser saber mais sobre o que cada configuração acima faz, de uma olhada na documentação do próprio Typescript.
Em seguida, crie uma pasta na raiz do seu projeto chamada src e um arquivo de entrada qualquer ( poderia ser index.ts )
// src/index.ts
export {}
console.log('Hello Dev :D')
Se você tentar executar esse arquivo com node, provavelmente, vai ser gerado um erro na seu console.
Isso acontece pois o NodeJS apenas consegue interpretar arquivos .js. Para resolvemos isso, basta instalar um pacote que possibilitara entender arquivos .ts
# NPM
npm i -D ts-node-dev
# yarn
yarn add -D ts-node-dev
Agora é só criar um script no package.json e executar o comando no terminal.
{
// ...
"scripts": {
"dev": "tsnd --clear --ignore-watch node_modules --transpile-only --respawn src/index.ts",
},
// ...
}
# NPM
npm run dev
# yarn
yarn dev
Pronto :) Seu NodeJS já consegue entender o Typescript 🥳🎇
Gerando um build do seu projeto
Ok, você já configurou seu setup ( por enquanto, de uma forma bem básica ) com Typescript. Mas, como já havia sido dito, o Node só entende arquivos .js, você vai usar Typescript apenas quando você esta desenvolvendo.
Em produção, você vai transformar seu código Typescript para Javascript e o Node vai entender ele nativamente.
Já configuramos o nosso tsconfig.json com as configurações de compilação. Apenas vamos criar dois script no package.json e executar no terminal.
{
// ...
"scripts": {
"dev": "tsnd --clear --ignore-watch node_modules --transpile-only --respawn src/index.ts",
"build": "rm -rf ./dist && tsc",
"start": "node ./dist"
},
// ...
}
# NPM
npm run build
npm start
# yarn
yarn build
yarn start
Vai ser gerado na raiz do seu projeto, uma pasta chamada dist contendo o nosso código Typescript compilado para Javascript e pronto para produção 😎
Se eu te ajudei em algo, comente 😁
Top comments (5)
Ai sim em parabéns pela explicação, grande sucesso AugustoTI. : )
Ok
Ok
Ok
Ok