Como Configurar o TypeScript com o Express

TypeScript é uma linguagem de programação fortemente tipada que estende as capacidades do JavaScript. Ela oferece uma gama de recursos para ajudá-lo a desenvolver aplicativos escaláveis com Node.js e Express.

Uma das principais vantagens do TypeScript em relação ao JavaScript é que ele fornece classes de tipos, o que facilita a criação de códigos mais previsíveis e de fácil manutenção. Além disso, o TypeScript oferece segurança de tipo, garantindo que seu código esteja livre de erros de tempo de execução e facilitando a detecção de falhas no início do desenvolvimento. A linguagem também vem com ferramentas de refatoração e preenchimento automático, o que melhora a experiência dos desenvolvedores.

Além disso, o Node.js e o Express oferecem excelente desempenho para aplicativos de qualquer escala. O uso de classes no TypeScript também ajuda na organização e na estrutura, auxiliando ainda mais na escalabilidade. Com essas ferramentas, você pode criar aplicativos robustos e dimensionáveis para lidar com a demanda crescente.

Este artigo demonstra a configuração de um aplicativo Express usando o TypeScript com um único endpoint. Em seguida, ele explica como implantar seu aplicativo na hospedagem de aplicativos da Kinsta.

Como criar um servidor Express

Para seguir este tutorial, verifique se você tem o Node.js e o npm instalados em seu computador. Para configurar um servidor Express:

1. Crie um diretório usando o código abaixo:

   mkdir sample_app && cd sample_app

2. Inicialize um aplicativo Node.js no diretório executando este comando:

   npm init -y

   O sinalizador -y no comando aceita os prompts padrão ao criar um arquivo package.json preenchido com o seguinte código:

   { 
     "name": "sample_app",
     "version": "1.0.0",
     "description": "", 
     "main": "index.js", 
     "scripts": { 
       "test": "echo \"Error: no test specified\" && exit 1" 
     }, 
     "keywords": [], 
     "author": "", 
     "license": "ISC" 
   }

3. Em seguida, instale express para adicionar funcionalidade essencial e dotenv para gerenciamento de variáveis de ambiente no diretório que você acabou de criar executando este comando:

   npm i express dotenv

4. Crie um arquivo .env na raiz do diretório sample_app e preencha com a variável abaixo.

   PORT=3000

5. Crie um aplicativo expresso que responda com um texto Hello World quando os usuários visitarem http://localhost:3000.

   const express = require("express");
   const dotenv = require("dotenv");
   
   // configures dotenv to work in your application
   dotenv.config();
   const app = express();
   
   const PORT = process.env.PORT;
   
   app.get("/", (request, response) => { 
     response.status(200).send("Hello World");
   }); 
   
   app.listen(PORT, () => { 
     console.log("Server running at PORT: ", PORT); 
   }).on("error", (error) => {
     // gracefully handle error
     throw new Error(error.message);
   })

   dotenv.config() você pode usar o recurso de configuração para preencher o ambiente de processo do seu aplicativo Node (process.env) com variáveis definidas em um arquivo .env.

6. Inicie seu aplicativo Node.js executando este comando:

   node index.js

   Verifique se o aplicativo funciona visitando http://localhost:3000 em seu navegador. Você deve obter uma resposta semelhante a esta.

   

Ative o TypeScript em um aplicativo Express

Siga as etapas abaixo para usar o TypeScript em um aplicativo Express:

1. Instale o TypeScript executando este comando:

   npm i -D typescript

   A opção -D permite que o npm instale pacotes como dependências de desenvolvimento. Isso significa que você pode utilizar os pacotes instalados com essa opção durante a fase de desenvolvimento.

2. Um dos pontos fortes da comunidade TypeScript é o repositório DefinitelyTyped do GitHub. Ele armazena a documentação das definições de tipos para vários pacotes npm. Os usuários podem integrar rapidamente os pacotes npm em seus projetos sem se preocupar com dificuldades relacionadas a tipos, instalando apenas a definição de tipo para esses pacotes com o npm.DefinitelyTyped é uma ferramenta indispensável para os desenvolvedores de TypeScript. Ela permite que eles escrevam códigos mais limpos e eficientes e reduzam a probabilidade de erros. Você instala as definições de tipo tanto do express e do dotenv executando este comando:

   npm install -D @types/express @types/dotenv

3. Para inicializar o TypeScript, execute este comando.

   npx tsc --init

   O arquivo tsconfig.json gerado indica o diretório raiz do seu aplicativo TypeScript. Ele fornece opções de configuração para definir como os compiladores do TypeScript devem funcionar. Ele inclui uma série de opções config desativadas ou ativadas, com comentários que explicam cada opção.

4. Adicione uma propriedade outDir ao objeto config para definir o diretório de saída.

   {
     "compilerOptions": {
       // …
       "outDir": "./dist"
       // …
     }
   }

Como criar um servidor TypeScript

Para criar um servidor TypeScript, altere a extensão .js para .ts e atualize o código com essas definições de tipo:

import express, { Request, Response } from "express";
import dotenv from "dotenv";

// configures dotenv to work in your application
dotenv.config();
const app = express();

const PORT = process.env.PORT;

app.get("/", (request: Request, response: Response) => { 
  response.status(200).send("Hello World");
}); 

app.listen(PORT, () => { 
  console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
  // gracefully handle error
  throw new Error(error.message);
});

Para usar o pacote do compilador e compilar o arquivo TypeScript em JavaScript, execute o comando abaixo no diretório raiz do seu aplicativo.

npx tsc

Em seguida, inicie seu aplicativo executando o comando.

node dist/index.js

Se você visitar o site http://localhost:3000 em seu navegador, deverá receber uma resposta “Hello World”.

Como implantar seu servidor TypeScript na Kinsta

Agora, você está pronto para implantar seu aplicativo web. Você pode implantar seu aplicativo em muitas plataformas, incluindo a hospedagem de aplicativos da Kinsta.

Antes de você enviar seu aplicativo para um repositório Git, não é recomendável usar o TypeScript e fazer o commit do arquivo JavaScript compilado no Git. Inclua um script start no arquivo package.json.

{
  // …
  "script": {
    "start": "npx tsc && node dist/index.js",
  }
  // …	
}

Além disso, crie um arquivo .gitignore no diretório raiz do seu aplicativo e inclua node_modules e .env para evitar que você envie esses arquivos para o provedor do Git.

Depois que o repositório estiver definido, siga estas etapas para implantar seu aplicativo na Kinsta:

1. Faça login ou crie uma conta para visualizar seu painel MyKinsta.
2. Autorize a Kinsta com seu provedor Git.
3. Clique em Aplicativos na barra lateral esquerda e, em seguida, clique em Adicionar aplicativo.
4. Selecione o repositório e a branch a partir da qual você deseja implantar.
5. Atribua um nome exclusivo ao seu aplicativo e escolha um local do centro de dados.
6. Use todas as configurações padrão. O MyKinsta usa npm start como ponto de entrada para implantar seu aplicativo. Se quiser usar outro comando, você pode ajustar o processo de tempo de execução no MyKinsta.
7. Clique em Criar aplicativo.

Após a implantação, o MyKinsta fornece uma URL para você acessar publicamente a implantação do seu aplicativo. Você pode visitar a página para confirmar que ela exibe “Hello World”.

Resumo

Este guia demonstrou como você pode desenvolver e configurar um aplicativo Express usando TypeScript e implantar o aplicativo com a Kinsta. O TypeScript tem recursos extras que o JavaScript não tem – incluindo classes de tipos, segurança de tipos, ferramentas de refatoração e preenchimento automático – para ajudar você a criar aplicativos escaláveis e detectar erros durante o desenvolvimento.

A Kinsta ajuda você a implantar seu aplicativo rapidamente com segurança e estabilidade aprimoradas. Com os 21 centros de dados que oferecem a máquina C2 do Google, executada na rede de nível premium do Google.

Você já usou TypeScript no passado? O que você acha de usá-lo com um servidor Express?

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

• Site
• LinkedIn