DEV Community

Guilherme Siquinelli
Guilherme Siquinelli

Posted on

Como iniciar um projeto TypeScript

Os requisitos básicos para que possamos utilizar TypeScript em um projeto são

  1. Instalar NodeJS
  2. Criar um diretório (pasta) para seu projeto
  3. Configurar o NPM no projeto
  4. Adicionar TypeScript como dependência do projeto
  5. Configurar tsconfig.json no projeto
  6. Nosso arquivo principal
  7. Nossos scripts
  8. Concluindo

Então vamos lá.

Instalar NodeJS

Para instalar o NodeJS recomendo acessar o site oficial, faça o download da última versão LTS e instale em seu computador.

Criar um diretório para seu projeto

Isso pode ser feito utilizando a interface gráfica do seu sistema operacional ou pelo terminal de comandos e caso opte pelo terminal, abra seu VSCode e em seguida abra o terminal clicando no menu superior
"Terminal > New terminal" e então vamos para o comando

Dica
Não é uma boa prática o uso de caracteres especiais como acentos ou espaços para evitar erros de codificação. O ideal é que sejam utilizadas apenas letras e hífen para separação entre palavras.

mkdir nome-do-projeto
Enter fullscreen mode Exit fullscreen mode

Após criado, vamos abrir o projeto recém criado no VSCode

code nome-do-projeto -r
Enter fullscreen mode Exit fullscreen mode

O parâmetro -r indica que queremos abrir usando a mesma janela, evitando termos 2 janelas do VSCode abertas.

Configurar o NPM no projeto

O NPM (Node Package Manager) é o gerenciador de pacotes e com ele podemos usar bibliotecas escritas por outras pessoas ou publicar nossas próprias bibliotecas (escritas em JavaScript ou TypeScript) para que outros projetos usem.

Bibliotecas usadas são dependências, e se tornam necessárias para que nosso código funcione, além disso também devemos informar suas respectivas versões.

Quando executamos o comando npm install estamos fazendo download destas dependências.

Também definimos scripts úteis. São comandos que deixarão nosso fluxo de desenvolvimento mais prático e fazemos isso configurando um objeto { "chave": "valor" } onde a chave é um apelido que podemos escolher como desejarmos, já o valor será o comando que será executado quando invocado através do comando npm run chave

Ao executar

npm init
Enter fullscreen mode Exit fullscreen mode

Responderemos algumas perguntas

  1. Nome do projeto, padrão é o nome do diretório
  2. Versão do projeto, padrão é 1.0.0
  3. Descrição do projeto, padrão em branco
  4. Ponto de entrada principal, o padrão é index.js
  5. Comando para execução de testes
  6. Link do repositório git, padrão em branco
  7. Palavras chaves, padrão em branco
  8. Autor, padrão em branco
  9. Licença, padrão é ISC mas recomendo a GPLv3 Tradução

Adicionar TypeScript como dependência do projeto 

npm i -D typescript
Enter fullscreen mode Exit fullscreen mode

O parâmetro -D indica que será uma dependência necessária apenas durante o desenvolvimento e não depois que estiver em produção. Este é o caso do TypeScript, visto que enviamos para produção apenas o código JavaScript gerado a partir do que escrevemos em TypeScript.

Configurar tsconfig.json no projeto

Este arquivo indica que esse diretório é a raiz do projeto TypeScript e especifica os arquivos raiz e as configurações de compilação necessárias para o projeto, mais informações neste link

Nosso arquivo principal

Vamos cria-lo com o seguinte comando

code src/index.ts
Enter fullscreen mode Exit fullscreen mode

Em seguida vamos salva-lo.

Agora que temos nosso arquivo no diretório src, vamos alterar nosso tsconfig.json descomentando as linhas 48, 50 e 56 e configurando desta forma

tsconfig.json

 "sourceMap": true, "outDir": "./dist", "sourceRoot": "./src",
Enter fullscreen mode Exit fullscreen mode

Isso define que o compilador deve procurar arquivos no diretório "src" e o resultado deverá ser salvo no diretório "dist".

Nossos scripts

Um padrão muito utilizado são os comandos "dev" e "build", faremos isso alterando o objeto "scripts": {} no arquivo package.json, com os comandos tsc e tsc -watch, respectivamente.

package.json

 "scripts": { "build": "tsc", "dev": "tsc -watch", "test": "echo \"Error: no test specified\" && exit 1" },
Enter fullscreen mode Exit fullscreen mode

A partir de agora podemos desenvolver utilizando o comando npm run dev e toda vez que alterarmos algum arquivo dentro do diretório "src", o compilador do TypeScript irá entrar em ação, colocando o resultado no diretório "dist".

Concluindo

Para saber se está tudo funcionando, adicione um log

src/index.ts

console.log('foi')
Enter fullscreen mode Exit fullscreen mode

E execute

npm run build
Enter fullscreen mode Exit fullscreen mode

Provavelmente foi criado um diretório "dist" com um arquivo index.js e agora executamos

node dist/index.js
Enter fullscreen mode Exit fullscreen mode

Se você viu escrito "foi" no seu terminal, tivemos êxito e temos nosso projeto configurado!

Top comments (0)