DEV Community

Vítor Oliveira for Codificações para mim mesmo

Posted on • Updated on

Criando projeto com TypeScrit

Para começar, vamos falar um pouquinho sobre TypeScript. O TypeScript é uma linguagem open-source da Microsoft, que traz um conjunto de muitas melhorias do JavaScript, ambas podem trabalhar juntas trazendo benefícios durante o desenvolvimento como tipagem(estática) de parâmetros, impedindo que sofram alteração no tipo do seu valor ao longo do desenvolvimento.
Documentação do TypeScript

Agora sim vamos começar a criação do projeto seguindo um passo a passo bem simples.

Caso você já tenha criado e só falta essa parte do TypeScript, pula pra parte 4 ou 5 — dependendo da sua situação e manda bala que vai dar certo.

Escolha o local onde vai ficar sua API e crie uma pasta, feito isso, acesse a pasta pelo seu terminal e execute o comando abaixo:
1- yarn init -y ⇒ Vai criar o arquivo packege.json
2- yarn add express ⇒ Serve para criarmos nossas rotas
3- yarn add @types/express -D ⇒ Evitando casualidade na hora de acessar diferentes tipos de rota, instalando todos os tipos do Express
4- yarn add typescript -D ⇒ Adiciona TypeScript como dependência de projeto.
5- yarn tsc --init ⇒ Cria o arquivo tsconfig.json
6- yarn add ts-node-dev -D ⇒ Responsável pelo funcionamento e conversão do arquivo TS. Depois de executar o comando, precisamos adicionar um script dentro de packege.json como no exemplo abaixo:

//Pode ficar entre license
"scripts": {
    "dev": "ts-node-dev src/server.ts"
},
//e dependencies
Enter fullscreen mode Exit fullscreen mode

Existem outras flags que podem ser adicionadas no script dev, que auxiliam em diferentes níveis no desenvolvimento da aplicação.

Flag é um parâmetro no comando que tem -- antes.

Vou deixar abaixo como utilizo no meu aprendizado e uma descrição de cada uma delas.

"scripts": {
    "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules --respawn src/server.ts"
},
Enter fullscreen mode Exit fullscreen mode

Descrição das Flags

  • ts-node-dev ou tsnd ⇒ Como já falamos, é para o funcionamento da aplicação e conversão dos arquivos TS.
  • --inspect ⇒ Habilita a utilização do debug dentro da aplicação, e para configurar essa parte tem um outro post que fala sobre isso.
  • --transpile-only ⇒ Desabilita a verificação de erros na aplicação, afinal de contas, o próprio VS Code e o ESLint já fazem isso.
  • --ignore-watch node_modules ⇒ Não observa alterações dentro da pasta node_modules. Então acaba ajudando a diminuir a lentidão no restart da aplicação.
  • --respawn ⇒ Da um reload na aplicação quando houver alterações no código.

Outra observação, agora com relação a forma como eu estudo. É sobre desabilitar uma linha dentro de tsconfig.json que verifica alguns erros dentro da aplicação como declaração de variável. Pra isso basta procurar por "strict": "true" e comentar a linha.

—————————————————

📌Para dúvidas ou sugestões:

Deixe seu comentário ou entre em contato.

Top comments (0)