-
Notifications
You must be signed in to change notification settings - Fork 1
Tutoriais
Apresentando brevemente o que é React, esse é um framework de javascript usado para criação de interfaces. Ele é baseado em componentes, onde uma tela é composta por eles, e podem ser manipuladas individualmente. Dessa forma, facilitando a construção das interfaces.
Com essa ideia de componentes, é possível fazer a reutilização dos mesmos durante a criação. Tornando-o flexível.
Uma das formas de iniciar um projeto em React é usando o Create-react-app, usando o "npx" que é um package runner que vem com npm 5.2+, cujo vem junto a instalação do Node. Portanto, basta usar o comando:
npx create-react-app my-app
Dessa maneira, o projeto React vai estar pronto para rodar. Basta entrar no diretório do projeto, e usar o comando:
cd my-app
npm start
Entretanto, nossa aplicação vai usar o React juntamente com typescript, para podermos obter tipagem estática, que não seria possível usando com o javascript.
Dessa forma, exige uma maneira diferente no uso do comando. Acrescentando o --template typescript. Diante disso, o formato dos arquivos irão mudar para .tsx ao invés de .js, além da criação do arquivo tsconfig.json, que são as configurações do typescript dentro do projeto. Logo, o comando ficaria da seguinte forma:
npx create-react-app my-app --template typescript
Para nossa aplicação escolhemos trabalhar com framework React para o front-end e NodeJS no back-end. Consequentemente, precisamos instalar o Node em nossa maquina para conseguir rodar nossa aplicação localmente, pois o Node é a tecnologia usada para executar o javascript fora do navegador. Além disso, o gerenciador de pacotes npm também é instalado junto com o Node, para instalar as dependências que serão utilizadas no projeto.
A instalação é simples, basta acessar o link Node para acessar a documentação, e baixar o Node.
Baixe a versão LTS para garantir a estabilidade e compatibilidade da aplicação.
Após baixar execute o instalador e prossiga. Logo mais, verifique se instalou tudo corrtamente, abrindo o prompt de comandos e digitando:
node -v
npm -v
Se tudo ocorreu bem, a versão instalada vai ser mostrada.
A seguir iremos seguir os seguintes passos para configurar nodejs com typescript e express
Crie um arquivo package.json. Crie um arquivo tsconfig.json. Instale pacotes para Node.js e Express. Instale o TypeScript no projeto Node.js. Crie um servidor Express usando TypeScript. Defina as configurações do TypeScript. Adicione scripts no arquivo package.json para construir e executar o projeto.
Primeiramente, precisamos criar um diretório onde guardaremos os arquivos do nosso projeto. Então, dentro desse diretório, criaremos um arquivo package.json. Este arquivo armazenará todos os nossos scripts e rastreará nossos pacotes instalados.
mkdir node-typescript-project
cd node-typescript-project
npm init --yes
Depois criamo um diretório chamado node-typescript-project usando o comando mkdir, mas você pode nomear seu diretório como quiser.
Em seguida, entre no seu diretório usando o comando cd. Ao criar seu arquivo package.json, você pode usar --yes sinalizador para obter todas as configurações padrão. Caso contrário, você pode definir sua configuração manualmente sem usar o sinalizador --yes.
Ao abrir seu diretório em um editor de texto, podemos verificar o arquivo package.json. Com a configuração padrão, ficará mais ou menos assim:
{
"name": "node-typescript-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC"
}
Nesta etapa, criaremos o arquivo tsconfig.json. É um arquivo de configuração para TypeScript. O TypeScript usará esse arquivo ao compilar seu projeto em JavaScript.
Antes de criar este arquivo, certifique-se de ter instalado o TypeScript globalmente em seu computador. Você também pode usar o TypeScript sem instalá-lo globalmente.
tsc -v
Podemos verificar se o seu computador possui o TypeScript instalado globalmente. O comando acima mostrará um número de versão, se estiver disponível. Caso contrário, você pode instalar a versão mais recente usando o seguinte comando.
npm install -g typescript
Quando você tiver o pacote TypeScript instalado em seu sistema, poderá usar o comando tsc para gerar um arquivo tsconfig.json.
tsc --init
O comando acima irá gerar o arquivo com as configurações padrão do compilador. Por enquanto, deixaremos este arquivo como está com essas configurações padrão. posteriormente modificaremos essas configurações para nosso projeto.
Se você não tiver o TypeScript instalado globalmente em seu computador, será necessário adicionar npx com o comando anterior para gerar um arquivo tsconfig.json.
npx tsc --init
Etapa 3: Instalando pacotes para Node.js e Express Boilerplate
Agora vamos instalar nossos pacotes necessários como dependências e devDependencies para o projeto. Instalaremos 2 pacotes como dependências express e dotenv. Podemos usar o comando abaixo para instalar os pacotes.
npm install express dotenv
express - É um framework Node.js. Vamos usá-lo para criar nosso servidor. dotenv - Este pacote é usado para configurar variáveis de ambiente com Node.js
Também precisamos de alguns pacotes para o desenvolvimento como devDependencies. Podemos instalá-los com o seguinte comando:
npm install --save-dev nodemon ts-node
No comando acima, o sinalizador --save-dev é usado para informar ao Node que esses pacotes não são nossas principais dependências para o projeto.
nodemon - Este pacote rastreia mudanças em um projeto e reinicia o servidor automaticamente. Quando você atualizar qualquer código em seu projeto Node, ele reiniciará seu servidor com o código atualizado. ts-node - É um mecanismo de execução TypeScript para Node. É necessário que o nodemon execute seus arquivos TypeScript no Node.js sem pré-compilar.
Mesmo como TypeScript instalado globalmente, é necessário instalá-lo localmente para cada projeto como uma dependência de desenvolvimento. Também precisamos instalar os pacotes de declaração @types para Express e Node.js porque eles não vêm com arquivos de declaração de tipo.
Os pacotes de declaração de tipo contêm arquivos com extensões .d.ts. Esses arquivos descrevem todos os tipos presentes em um pacote JavaScript para o compilador TypeScript. Esses arquivos de declaração de tipo estão disponíveis para todos os pacotes escritos em JavaScript. Os pacotes TypeScript não precisam de um arquivo de declaração de tipo.
Portanto, se um pacote for escrito em Typescript, não há necessidade de instalar uma declaração de tipo para ele. Encontraremos os arquivos de declaração de tipo para qualquer pacote de JavaScript no repositório Github do DefinitivamenteTyped (https://github.com/DefinitelyTyped/DefinitelyTyped).
Portanto, não precisamos escrevê-los do zero. Existe uma técnica fácil para encontrar uma declaração de tipo para qualquer pacote. O padrão @types/packageName.
Por exemplo, se o nome do pacote for expresso, sua declaração de tipo será @types/express. Todo pacote JavaScript segue esse padrão. Portanto, não precisamos memorizar o nome do pacote de declaração de tipo.
Ao executar o comando abaixo, instalaremos esses 3 pacotes. Um é typescript e os outros 2 são declarações de tipo para express e node. Com o sinalizador --save-dev, estamos informando que esses pacotes são dependências de desenvolvimento.
npm install --save-dev typescript @types/express @types/node
Ao abrir o arquivo package.json vemos a lista de pacotes instalados no projeto. E encontraremos os pacotes divididos em 2 grupos.
Todas as dependências principais estão dentro do bloco de dependências e as dependências de desenvolvimento são do bloco devDependencies.
Depois de instalar todos os nossos pacotes, vamos criar um servidor Express simples com TypeScript. Inicialmente, criaremos um diretório chamado src dentro do diretório node-typescript-project que criamos na etapa 1.
Todos os nossos arquivos TypeScript ficarão dentro do diretório src. Vamos configurar este diretório como raiz para nossos arquivos TypeScript na próxima etapa usando o arquivo tsconfig.json.
Vamos criar o arquivo app.ts no diretório src. Ele será o ponto de entrada do nosso aplicativo Node.js. Adicionaremos o seguinte código ao arquivo app.ts.
import { config } from 'dotenv';
import express, { Application, NextFunction, Request, Response } from 'express';
config();
const app: Application = express();
app.get('/', (req: Request, res: Response, next: NextFunction) => {
res.send('Express server with TypeScript');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
Estamos usando o pacote dotenv para carregar variáveis de ambiente de um arquivo .env. Existe uma função chamada config() neste pacote. Só precisa importar e chamar esta função para carregar as variáveis de ambiente no aplicativo Node.js.
PORT=3000
Criamos o arquivo .env com o código acima dentro do diretório node-typescript-project. Como estamos usando o pacote dotenv, podemos acessar a variável PORT usando process.env.PORT em nossa aplicação.
Nós importamos a funçao express() do pacote express. Ao chamar esta função, ela retornará uma aplicação do tipo Application. Precisamos importar esse tipo do pacote expresso.
Agora, usando o aplicativo retornado da função express(), podemos criar rotas. Cada rota terá req, res e next em sua função de retorno de chamada. Basta importar seus tipos Request, Response e NextFunction do pacote express.
Por fim, escutaremos uma porta para que possamos executar nosso aplicativo em um navegador. Estamos obtendo o número da porta da variável de ambiente usando process.env.PORT. Se retornar indefinido, por padrão, usará 3000.
Agora, é hora de definir nossas configurações de TypeScript no arquivo tsconfig.json para o projeto. O compilador TypeScript usará essas configurações para compilar o código em JavaScript.
Dentro desse arquivo, há um campo obrigatório chamado compilerOptions. Estas são as opções que iremos configurar neste campo:
target - nos permite especificar a versão de destino do JavaScript que o compilador produzirá. módulo - Especifica um gerenciador de módulo no código JavaScript compilado. Ele suporta CommonJS que é padrão em Node.js outDir - Define um diretório de saída onde o compilador armazenará todos os arquivos JavaScript compilados. rootDir - Especifica o diretório raiz dos arquivos de entrada. Todos os arquivos TypeScript ficarão dentro desse diretório. estrito - Se for definido como verdadeiro, habilitará todas as opções de verificação de tipo estrito. moduleResolution - Especifique a estratégia de resolução do módulo. esModuleInterop - Permite compilar módulos ES6 para módulos CommonJS em Node.js skipLibCheck - Se for definido como true, ignorará a verificação de tipo dos arquivos de declaração de biblioteca padrão. forceConsistentCasingInFileNames - Se for definido como true, habilitará a nomenclatura de arquivo com distinção entre maiúsculas e minúsculas.
Quando removermos todos os comentários do arquivo tsconfig.json, ele ficará mais ou menos assim:
{
"compilerOptions": {
"target": "ES2015",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["./src"]
}
Por padrão, o destino é definido como "es5", estamos configurando-o como "ES2015".
Como rootDir, vamos especificar o diretório src que foi criado. Isso significa estamos dizendo ao compilador que todos os arquivos TypeScript ficarão dentro desse diretório.
Quando definimos um diretório como nosso rootDir, temos que adicionar um campo adicional ao lado do campo compilerOptions que é incluído.
Este campo de inclusão é um array. Aqui, também temos que especificar o caminho da nossa pasta src. Dessa forma, o compilador compilará apenas os arquivos TypeScript que estiverem dentro desse diretório.
Caso contrário, o compilador também tentará compilar qualquer arquivo TypeScript fora do diretório src e dará um erro.
No Node.js, os scripts são os comandos usados para executar diferentes tarefas. Podemos adicionar diferentes scripts no arquivo package.json.
Para este projeto, adicionaremos 3 scripts:
build - Construirá nosso projeto para produção. dev - Vai rodar nosso projeto de desenvolvimento. Se você atualizar seu código, ele reiniciará automaticamente o servidor. start - Ele iniciará o servidor de produção após construirmos nosso projeto usando o script de construção.
"scripts": {
"build": "tsc",
"dev": "nodemon ./src/app.ts",
"start": "node ./dist/app.js"
},
No script de compilação, deve-se especificar tsc se tiver o TypeScript instalado globalmente no computador. Caso contrário, deve-se usar npx tsc. Ele irá compilar nosso projeto para JavaScript e armazená-lo dentro do diretório ./dist. Porque especificamos esse diretório como outDir no arquivo tsconfig.json.
No script dev, iremos especificar o arquivo app.ts dentro do diretório src. Como é um arquivo TypeScript, o pacote nodemon também usará o pacote ts-node em segundo plano para compilá-lo.
No script de início, executaremos o o arquivo app.js dentro do diretório ./dist. Só usaremos este script após a construção do nosso projeto.
npm run build - Comando para criar o projeto.
npm run dev - Este comando ativará um servidor de desenvolvimento em http://localhost:3000. Ele também reiniciará o servidor quando algo no código for alterado.
npm run start - Ele iniciará o servidor de produção em http://localhost:3000 após a construção do projeto.
A partir de agora, podemos usá-lo como padrão para qualquer projeto Node.js futuro.