DEV Community

Cover image for TypeScript para iniciantes: como criar seu primeiro projeto
Juan Belieni
Juan Belieni

Posted on

TypeScript para iniciantes: como criar seu primeiro projeto

#javascript #beginners #typescript #node

Como você já deve saber, o TypeScript vem crescendo bastante ultimamente, então é primordial que você conheça e saiba como começar um projeto nessa linguagem.

Felizmente, o TypeScript é não nenhum bicho de sete cabeças. Pelo contrário, essa linguagem não passa de JavaScript com algumas funcionalidades a mais. Ao longo desse artigo você verá o quão simples é começar um projeto nessa linguagem.

Eu irei utilizar o gerenciador de pacotes Yarn. Fique a vontade para utilizar qualquer um que você preferir.

Tudo o que eu fizer ficará disponível nesse repositório no GitHub: https://github.com/juanbelieni/typescript-iniciantes

Então, vamos começar.

Iniciando o projeto com o Yarn

Crie uma nova pasta e navegue até ela:

mkdir typescript-iniciantes
cd typescript-iniciantes
Enter fullscreen mode Exit fullscreen mode

Inicie o projeto com Yarn:

yarn init -y
Enter fullscreen mode Exit fullscreen mode

Após esses passos, um arquivo package.json vai aparecer na raiz do projeto com um conteúdo parecido com esse:

{
  "name": "typescript-iniciantes",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
Enter fullscreen mode Exit fullscreen mode

Agora, vamos adicionar o TypeScript.

Adicionando e configurando o TypeScript

Antes de adicionarmos o pacote, temos que ter em mente que o TypeScript é uma ferramenta de desenvolvimento. Em produção, o TypeScript é compilado diretamente para JavaScript.

Portanto, iremos adicionar o TypeScript como um pacote de desenvolvimento:

yarn add -D typescript
Enter fullscreen mode Exit fullscreen mode

Após isso, temos que criar um arquivo chamado tsconfig.json, usando o comando:

yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

Ao abrir esse arquivo, é possível ver uma infinidade de opções. Mas calma! Vamos mexer em apenas duas por agora, já que não é o nosso foco nos aventurar por todas as possibilidades que o TypeScript nos oferece.

Continuando, localize no arquivo tsconfig.json as opções outDir e rootDir. Elas são importantes pois vão definir em qual pasta vai estar o código em TypeScript e em qual pasta ele vai ser compilado em JavaScript. Substitua os valores padrões pelos seguintes valores:

"outDir": "./build", 
"rootDir": "./src",
Enter fullscreen mode Exit fullscreen mode

Dessa maneira, o código em TypeScript deverá estar localizado na pasta src. Após compilado o código irá estar disponível na pasta build.

Se quiser fazer um teste, crie um arquivo index.ts dentro da pasta src contendo um console.log('Olá TypeScript') e execute o seguinte comando para ver a mágica acontecer:

yarn tsc
Enter fullscreen mode Exit fullscreen mode

Criando os scripts build, start e dev

Até agora apenas adicionamos o TypeScript, porém ainda é necessário criar três scripts importantes para qualquer projeto nessa linguagem.
Esses scripts vão estar localizados no package.json:

{
  "name": "typescript-iniciantes",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {

  },
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}
Enter fullscreen mode Exit fullscreen mode

Para executá-los, basta escrever yarn <script> ou npm run <script>, se você estiver usando NPM.

Os scripts build e start

Eles vão servir para compilar o código em JavaScript e executá-lo após isso.

"scripts": {
  "build": "tsc",
  "start": "node build/index.js"
},
Enter fullscreen mode Exit fullscreen mode

O script dev

Esse script vai servir para que, quando estivermos no ambiente de desenvolvimento, não precisemos compilar o código toda vez que fizermos alguma alteração.

Para isso, vamos usar um pacote chamado ts-node-dev:

yarn add -D ts-node-dev
Enter fullscreen mode Exit fullscreen mode

E após isso, basta adicionar o script com a flag --ignore-watch node_modules para que ele ignore a pasta node_modules:

"scripts": {
  "build": "tsc",
  "start": "node build/index.js",
  "dev": "ts-node-dev --ignore-watch node_modules src/index.ts"
},
Enter fullscreen mode Exit fullscreen mode

Começando o desenvolvimento

Agora que já configuramos tudo que era necessário, já podemos começar a desenvolver. Eu irei criar uma rota bem simples em Express para servir de exemplo. Para isso, eu irei adicionar o Express e o seu pacote de tipos:

yarn add express
yarn add -D @types/express
Enter fullscreen mode Exit fullscreen mode

No arquivo src/ìndex.ts:

import express from 'express';

const app = express();
app.use(express.json());

interface RequestBody {
  name: string;
}

app.post('/', (request, response) => {
  const user = request.body as RequestBody;

  return response.send({
    message: `Hello ${user.name}`,
  });
});

app.listen(3000, () => console.log('Listening 3000'));
Enter fullscreen mode Exit fullscreen mode

Concluindo

Como foi visto, essa foi uma configuração bem básica para quem quer começar a estudar TypeScript. Recomendo que você se aprofunde no estudo dessa ferramenta, que pode ajudar bastante na hora do desenvolvimento.

Top comments (0)