Typescript: uma introdução rápida e simples à linguagem open source da Microsoft
Cada vez mais vemos o Typescript ganhando o seu espaço. Frameworks famosos já oferecem suporte a linguagem sem precisar de configurações extras e bibliotecas possuem documentações para quem escreve suas aplicações com ele.
Desde 2017 pesquisas feitas pelo StackOverflow mostram o Typescript como uma das linguagens mais amadas pelos devs, e esse ano teve a sua melhor marca, ficando em 2° lugar.
Mas afinal o que é o Typescript?
De forma resumida o Typescript é um superset do Javascript, já que ele possui todas as features da linguagem e adiciona a ela tipagem estática (Types + Javascript = Typescript). Por esse motivo, ele necessita ser compilado para o Javascript, para assim, ser entendido pelo browser.
Mas sabendo o que é o Typescript, por que adicionar tipagem estática as aplicações? Isso não quer dizer mais código?
A resposta é sim, porém, as aplicações web estão ficando cada vez mais complexas e, como consequência, temos mais devs trabalhando em cima de projetos cada vez maiores. Com isso, aumentamos as chances de que erros aconteçam e o Typescript nos auxilia a resolver esse tipo problema. Aqui temos alguns exemplos de onde e como ele pode nos ajudar:
Diminui resultados inesperados
Esse é um exemplo muito famoso que encontramos mas que ilustra perfeitamente os tipos de erros que acabam sendo evitados por apenas definir os tipos dos parâmetros esperados em uma função que esperamos.
Erros mais descritivos
Por conta das bibliotecas estarem cada vez mais integradas ao Typescript, conseguimos ter acesso às propriedades com maior facilidade ao mesmo tempo que recebemos erros mais descritivos, facilitando a integração.
IDE mais poderosa
IDE’s como o Visual Studio Code que utilizam do Typescript já oferecem diversas ferramentas, como o autocomplete. Porém ao utilizarmos o TS essas features ficam muito mais funcionais.
Serve como documentação, além de facilitar o handover para novos desenvolvedores
Como devemos definir as estruturas e os tipos esperados acabamos produzindo uma documentação dentro do nosso próprio projeto, diminuindo a necessidade de escrever diversos logs e fazer requests por softwares como o Postman para ter acesso a estrutura de dados que estamos esperando.
Arquivos .ts e .js convivem
Como o Typescript vira Javascript no final do dia, os arquivos .ts e .js convivem no mesmo projeto, isso quer dizer que você pode implementar o TS gradualmente em um projeto, sem necessidade de reescrever tudo o que já foi feito.
Por onde começar
O Typescript oferece uma série de features e oportunidades, mas vamos começar pelo básico, falando sobre os tipos primitivos da linguagem que são:
number:
O type number aceita apenas números, sendo inteiros, decimais, hexadecimais e binários.
let idade: numberidade = 1
idade = 0xffd
idade = 12.3
string
Aceita somente strings, inclusive template string em que variaveis podem ser passadas.
let nome: stringnome = “nome”
nome = 'nome'
nome = `jorge ${variavel}`
boolean
O type boolean aceita os valores de true e false e também testes que retornem algum desses valores.
let boleano: stringboleano = true
boleano = false
boleano = 0 < 1
array
No array, definimos o tipo dos dados que o array irá receber, nesse caso informamos que uma variável irá receber um array de strings e a outra um array de números.
let opcoes: string[]
opcoes = ['alto', 'medio', 'baixo']let precos: Array<number>
precos = [19.9, 20, 99]
tupla
A tupla seria um array, porém, aqui definimos o tamanho que ela deverá ter assim como o tipo de cada posição desse array.
let tupla: [string, number]
tupla = ['12', 2]any
É o tipo default aplicado pelo TS caso não seja informado nenhum, seria a mesma coisa que não tipar a variavel, então ele vai aceitar qualquer valor.
void
Como diz o nome, é vazio, utilizado em funções que não retornam nenhum valor.
const helloWorld = (): void => {
console.log('hello world')
}object
É, por definição, tudo aquilo que não é um tipo primitivo.
let objeto: objectobjeto = {
key: 'value'
}
Além destes tipos temos alguns outros como enum, undefined, null e never. Porém são utilizados em situações mais específicas e para não alongar muito essa seção recomendo dar uma olhada na própria documentação do Typescript que fala sobre todo os tipos de forma bem clara e com inúmeros exemplos.
Type Aliases
E se os tipos primitivos não forem suficientes, casos onde precisamos de um tipo mais específico? Temos, então, como utilizarmos alguns operadores que permitem a declaração de tipos conforme a nossa necessidade.
let numero_ou_texto: string | numbernumero_ou_texto = '1'
numero_ou_texto = 1
No caso acima, dizemos que nossa string pode receber tanto números como strings, utilizando o operador “|”. Podemos deixá-los ainda mais específicos, casos onde precisamos receber nomes específicos, como no exemplo abaixo:
type DesktopOS = 'Mac OS' | 'Linux' | 'Windows'let Plataforma: DesktopOSPlataforma = 'Linux'
Plataforma = 'IOS' //erro
Assim, evitamos a possibilidade de receber um sistema operacional que não faça parte deste grupo.
E utilizando destes operadores, podemos criar também estruturas que esperamos de objetos:
type User = {
id: string | number
name: string
email: string
phone?: number
}No caso acima temos a estrutura de um usuário onde o telefone não é obrigatório, graças ao “?” que colocamos logo após a key phone.
Então poderíamos declarar um usuário da seguinte forma sem ter nenhum erro:
let Usuario: UserUsuario = {
name: 'Nave.rs',
email: 'nave@nave.rs'
}
Existem situações onde após declarar uma estrutura queremos aproveitá-la. Porém com propriedades a mais, como uma variável que irá receber o usuário e informações de pagamento, teríamos que declarar tudo novamente? Não tem necessidade. Com o uso do operador “&” podemos concatenar dois types em um só:
type Payment = {
method: string
CPF: string
value: number
}let PaymentInfo: User & Payment
Nesse caso, a variável PaymentInfo irá necessitar de todas informações do nosso type User mais as informações do type Payment, assim teremos o usuário e as informações de pagamento!
Interfaces
Como objetos são uma parte fundamental do desenvolvimento, o Typescript possui as interfaces que nos auxiliam a lidar exclusivamente com tipagens de objetos.
interface UserComputer {
system: DesktopOS
brand: string
ip_adress?: number | string
}Aqui continua valendo todos os operadores que mencionamos acima, assim podemos deixar uma key opcional, bem como atribuir mais de um tipo a ela (Lembra do type DesktopOS que declaramos antes? Podemos usar ele aqui também!).
A interface também nos permite concatenação, porém, devemos escrevemos de uma forma um pouco diferente.
interface UserDevices extends UserComputer {
smartphone_brand: string
mobile_os: 'Android' | 'IOS' | 'Windows Phone'
}Aqui acontece algo parecido com o que fizemos concatenando dois types, então a interface UserDevices terá os novos campos que adicionamos além de todos aqueles (obrigatórios ou não) que foram declarados no nosso UserComputer.
Type vs Interfaces
E afinal, qual a diferença entre Type e Interface? Parece que types são mais completos, por que utilizar as interfaces então?
A principal diferença entre os dois, e provavelmente a mais importante é que as Interfaces podem ser estendidas caso declaradas novamente. Vejamos:
interface Name {
name: string
}interface Name {
lastname: string
}let Rafael: Name = {
name: 'Rafael',
lastname: 'Schumacher'
}
Agora, ao fazer isso com o type:
type Name = {
name: string
}type Name = {
lastname: string
}// error: Duplicate identifier 'Name'
E por que isso é importante? Pense no caso de escrever um biblioteca, códigos que necessariamente serão reutilizados. Utilizando interfaces abrimos a possibilidade de modificá-las para o contexto do projeto em que estamos trabalhando, sem perder as propriedades já existentes. Isso evita erros ao mesmo tempo que facilita a vida do desenvolvedor que não precisa se preocupar em criar novos tipos e fazer as concatenações necessárias.
O Typescript é mais uma das muitas ferramentas para auxiliar no dia a dia de desenvolvimento, e aprendemos aqui o que considero como a base necessária para começar a aplicá-lo em nossos projetos. Com o crescimento da linguagem, a comunidade vem se tornando cada vez mais forte assim temos menos dificuldade em achar respostas para eventuais dúvidas. Embora ele tenha a sua curva de aprendizado, acaba oferecendo inúmeras funcionalidades que melhoram e facilitam a manutenção de projetos, o que acaba fazendo valer a pena aplicá-lo.
Espero ter tirado dúvidas e te motivado a dar uma chance ao nosso querido Typescript.
