Na primeira parte desta série nós vimos o básico de TypeScript e como utilizar ele para adicionar tipagem em parâmetros, retornos de função e até para garantir segurança maior com o strict mode.
No artigo de hoje, vamos avançar nos nossos estudos deste superset tão famoso para TypeScript.
Atenção: este é um post intermediário, para alguém que já tem conhecimentos básicos em Node.js. Ele já vai direto ao ponto, para quem precisa de algo com mais didática, recomendo começar com esse.
Caso prefira, pode assistir ao vídeo abaixo ao invés de ler o tutorial, o conteúdo é semelhante.
#1 – Union Types
Falamos de tipagem estática para parâmetros e retorno de funções no último artigo e também do coringa ‘any’ quando queremos manter a tipagem dinâmica, mesmo como strict mode ligado em nosso tsconfig.json.
Mas e se queremos sim ter tipos, mas mais de um? Algumas linguagens com tipagem forte permite a chamada sobrecarga de métodos (overload), inexistente no JavaScript.
O TypeScript permite o uso de Union Types, que nada mais são do que diferentes tipos, mas ainda estáticos para suas variáveis, como abaixo.
|
1 2 3 4 5 6 |
function somar(num1 : number | string, num2: number){ if(typeof num1 === 'number') return num1 + num2; else return `${num1}${num2}`; } |
Note que defini mais de um tipo para o parâmetro num1, através do uso do pipe (‘|’). No entanto, o TypeScript me obriga a fazer checagem de tipo com um if quando uso Union Types, como você pode ver que fiz no código acima.
Se eu não fizer, ele irá me gerar um erro.
Ou seja, ele me acaricia com uma mão, e me bate com a outra, hehe.
Ainda na linha de Union Types, o TypeScript possui os Type Aliases, que são apelidos para Union Types.
Assim, posso criar um novo tipo a partir de dois outros possíveis, como abaixo, usando a keyword nova do TS chamada type.
|
1 2 3 4 5 6 7 |
type NumberOrString = number | string; function somar2(num1 : NumberOrString, num2: number){ if(typeof num1 === 'number') return num1 + num2; else return `${num1}${num2}`; } |
Assim, onde antes eu usaria o Union Type, agora posso usar o Type Alias que chamei de NumberOrString (bem sugestivo).
#2 – Tipos de objetos
Até aqui ficamos mexendo apenas com variáveis simples como números e strings. Mas e quanto aos objetos? Como fazer que a estrutura e tipo dos objetos seja respeitada utilizando TypeScript?
Quando você passa um objeto por parâmetro, você pode definir a sua estrutura no mesmo lugar em que declararia o seu tipo, como abaixo.
|
1 2 3 4 |
function cadastrar(cliente: { nome: string, dataNascimento: Date}){ console.log(cliente.nome); console.log(cliente.dataNascimento); } |
Note que o código é extremamente autoexplicativo: a função cadastrar espera receber um objeto cliente com um nome (string) e uma data de nascimento (Date).
Aqui, com apenas este trecho de código, não vai ficar evidente uma das maiores vantagens desta abordagem e programação com JS que é o ganho com o auto-complete do VS Code.
Uma vez que eu defini a estrutura do meu objeto, o VS Code consegue me sugerir as suas propriedades quando eu estou manipulando o mesmo no seu interior, coisa que geralmente não aconteceria, me forçando a decorar as informações ou ficar consultando frequentemente.
Essa vantagem da tipagem estática, para mim, supera as demais.
E ela pode ir além, juntando com o conceito de Alias Type que mostrei na seção anterior, que eu posso usar para definir um novo tipo de objeto, como abaixo.
|
1 2 3 4 5 |
type Cliente = { nome: string, dataNascimento: Date }; function cadastrar2(cliente: Cliente){ console.log(cliente.nome); console.log(cliente.dataNascimento); } |
Olha que bacana, criamos uma struct à “moda C”, hehehe.
Mas tem outro objeto que ainda não falamos que também se beneficia da segurança fornecida pela tipagem estática que são os arrays.
Em TypeScript, podemos definir o tipo de dado que deve estar presente no array desta forma.
|
1 2 |
const numeros : number[] = []; numeros.push(4); |
Aqui estou dizendo que a constante ‘numeros’ é do tipo ‘number[]’ (number array), ou seja, que somente numbers podem ser armazenados no seu interior, acabando com aquela festa do array de qualquer coisa e tornando seu código mais error proof.
Com isto tudo que vimos até o momento, já me sinto confiante para lhe explicar como usar TypeScript em um projeto real.
#3 – TypeScript com Node.js
Primeiro, crie uma pasta e vamos configurar o nosso projeto Node.js. Nesta pasta, rode o comando tsc –init para criar o arquivo de configuração do TypeScript e npm init para criar o arquivo de configuração do Node.js.
|
1 2 |
tsc --init npm init |
Vamos criar uma Web API REST aqui, como exemplo, e para isso vamos precisar da dependência do Express, instale-o.
|
1 |
npm i express |
Agora, crie o nosso clássico app.js para programarmos uma aplicação ExpressJS. Ou melhor, crie um app.ts, pois vamos usar TypeScript aqui.
|
1 2 3 4 |
//app.ts import express from "express"; const app = express(); app.listen(process.env.PORT || 3000); |
Repare que no app.listen eu deixei em aberto a porta em que a aplicação vai rodar. Se você tiver uma variável de ambiente PORT, nossa aplicação irá usá-la, caso contrário, usará a 3000 por padrão.
Se você tiver algum comando Node.js que o TypeScript não reconheça nativamente, você pode instalar a dependência dos types do Node, mas somente em ambiente de desenvolvimento, visto que TS serve para codificarmos melhor, certo?
|
1 |
npm i --save-dev @types/node |
O parâmetro –save-dev salvará esta dependência somente no seu ambiente de desenvolvimento.
Mas o que é esse @types/node afinal?
Todos os pacotes @types são extensões de pacotes já existentes no NPM para que eles suporte TypeScript, fornecendo, entre outras coisas, os tipos definidos para estes pacotes. Com @types/node, o TS irá conseguir entender sintaxe específica do Node.js, como nosso comando require.
E se quisermos oferecer suporte a TS no Express também, podemos instalar o @types dele, o que nos dará não apenas suporte aos seus tipos, mas a minha tão amada funcionalidade de code complete no VS Code.
|
1 |
npm i --save-dev @types/express |
Não esqueça de sempre instalar em ambiente de desenvolvimento, para não pesar em produção desnecessariamente.
O mais legal é que atualmente existe suporte com @types à maioria das dependências mais populares do NPM, tornando o uso com TS muito mais interessante e produtivo que no passado.
Mas para que consigamos desbloquear esses poderes, é necessário fazer uma configuração no tsconfig, deixando-o como abaixo:
|
1 2 3 |
"target": "es2020", "module": "commonjs", "moduleResolution": "node", |
Aqui, mudei o target para ES2020, uma versão bem mais interessante de JavaScript e que o Node.js possui suporte, bem como adicionei o moduleResolution configurado para Node, pois por padrão o TS foi criado para JavaScript client-side.
Se você testar agora, ao escrever “app.” no arquivo app.ts, o VS Code vai lhe sugerir tudo que pode fazer com o objeto app do Express.
Demais, não?
Nas próximas lições, vamos avançar na construção desta WebAPI com Express e TypeScript. Clique aqui para ler!
Para conhecer meu curso completo de Desenvolvimento Web Full Stack JS, clique no banner abaixo!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.