Como podemos falar... Sim, e absolutamente superior ao Javascript — não leve isso a sério.
Sei que as vezes pode ser confuso ouvir isso de Javascript, Ecmascript, Typescript e outros vários "algoscript", principalmente quando você ainda tá tendo os primeiros contatos com programação web, mas não, esses "script" que rodam na web geralmente "convertem" de algo, para o bom e velho Javascript — ou WebAssembly, mas isso é papo pra outro dia.
Como já escrevi aqui, Ecmascript é, em outras palavras, o "nome verdadeiro" do Javascript, mas não vamos nos aprofundar nisso, já o fizemos antes, o foco hoje é Typescript.
Typescript é uma linguagem de programação criada pela Microsoft e que foi divulgada em meados de Outubro de 2012 como um superconjunto de tipagens e ferramentas de Javascript.
Ele surgiu como "um simples" superconjunto de ferramentas para melhorar o processo de desenvolvimento de aplicações por parte do dev, mas hoje, o que antes chamávamos de superset também é uma linguagem tal qual o próprio Javascript.
Para usá-lo você vai precisar configurar alguma ferramenta de transpiling como: Babel, Webpack, Rollup ou mesmo o esbuild, mas também pode usá-lo de "forma nativa" através do Deno.
Ele tem amplo suporte a projetos Javascript famosos como: Angular, Vue.js, React.js, Express.js e D3.js. Ou melhor, estes projetos suportam bem o Typescript.
Como já deve ter ficado óbvio, um código Typescript — com extensão .ts — pode ser escrito em qualquer ambiente de desenvolvimento e rodar tanto no browser quanto no backend, porém, em muitos casos o processo de transcompilação é obrigatório. Para usá-lo no frontend, inevitavelmente você precisará usar uma ferramenta como as que citei inicialmente, ou, se estiver no backend e seu ambiente de execução for o Node, você também precisará passar pelo mesmo processo.
Ok, falamos, falamos e falamos, mas não vimos exemplos do que ele realmente adiciona.
Para prosseguirmos precisaremos de alguma IDE que suporte a linguagem ou permita ser estendida para entendê-la.
Antes de tudo, vamos criar um diretório chamado ts-introducao e logo entrar nela:
$ mkdir ts-introducao && cd $_
Em sistemas baseado em Unix, este comando vai criar o diretório "ts-introducao" e logo entrar nele.
Agora vamos iniciar um projeto padrão com yarn
$ yarn init --yes
Agora que iniciamos nosso projeto, precisamos instalar o Typescript, para isso, vamos usar o seguinte comando:
$ yarn add typescript -D
Este comando vai instalá-lo como dependência de desenvolvimento.
Agora vamos para as configurações finais.
Vamos rodar o seguinte comando para criar um arquivo de configuração padrão:
$ npx tsc --init
Agora teremos um arquivo tsconfig.json na raiz do nosso projeto.
Para começarmos criaremos um arquivinho chamado olaMundo.ts.
$ touch olaMundo.ts
Nosso código aqui será esse:
const mundo = 'Mundo'
export function dizOla(nome: string): void {
console.log(`Olá ${nome}`)
}
dizOla(mundo)
Vamos entender o código:
- Na linha 1 criamos uma contante
- Na linha 3 criamos uma função que recebe um parâmetro do tipo
stringe não retorna nada —voidé um tipo opcional, ele quer dizer que nada é retornado — e já a exportamos. - Na linha 4 damos um
consoleusando template literals, recurso do es6 - Agora, na linha 7 chamamos ela passando nossa contante lá do início.
Totalmente semelhante ao Javascript padrão, não?
Agora, para executar este código precisamos transcompilar, para isso, usaremos o seguinte comando:
$ npx tsc olaMundo.ts
Esse comando vai criar um arquivo olaMundo.js que pode ser entendido pelo Node.js
Simples, não?
Para tornar nossa etapa de compilação um pouco mais fácil, vamos criar um script no nosso package.json o deixando parecido com isso:
{
"name": "ts-introducao",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"typescript": "^5.0.4"
},
"scripts": {
"build": "tsc"
}
}
Agora só precisamos de um simples
$ yarn build
Facilitamos a etapa de converter um código em outro, mas ainda precisamos de uma etapa extra para rodar, mas não se usássemos o ts-node que já faz as duas etapas, de compilação e execução.
Primeiro precisaremos instalá-lo com:
$ yarn ts-node -D
Agora vamos alterar o nosso comando build para "build": "ts-node" e como isso só precisamos rodar o seguinte comando:
$ yarn build olaMundo.ts
Entendemos o básico?
Não sei se já falei, mas o Typescript também implementa bem a Programação Orientada a Objetos — POO, ou OOP para os mais íntimos — então podemos usar sem medo as classes, herança e afins.
Vamos ver um exemplo criando uma classe base:
abstract class Animal {
constructor() {}
}
Bem explícito, né.
Para usarmos herança, vamos conhecer a palavra-chave extends.
Agora vamos fazer alguma herança
class Cachorro extends Animal {
constructor() {
super()
}
late() {
console.log('auau')
}
}
class Gato extends Animal {
constructor() {
super()
}
mia() {
console.log('miau')
}
}
Tendo nossas classes definidas, vamos ver se as classes que herdam realmente são "espelhos" da classe Animal, e para isso rodaremos o seguinte código:
console.log('Cachorro é Animal:', new Cachorro() instanceof Animal)
console.log('Cachorro é Cachorro:', new Cachorro() instanceof Cachorro)
console.log('Cachorro é Gato:', new Cachorro() instanceof Gato)
console.log('\n')
console.log('Gato é Animal:', new Gato() instanceof Animal)
console.log('Gato é Gato:', new Gato() instanceof Gato)
console.log('Gato é Cachorro:', new Gato() instanceof Cachorro)
Se tudo der certo teremos uma saída parecida com essa:
Cachorro é Animal: true
Cachorro é Cachorro: true
Cachorro é Gato: false
Gato é Animal: true
Gato é Gato: true
Gato é Cachorro: false
Bem sólido, não? Agora testaremos se os métodos por nós definidos funcionam. Vamos usar o seguinte código:
new Cachorro().late()
new Gato().mia()
Se rodarmos este código, teremos a bela saída:
auau
miau
Bem útil, não? E por hoje é só.
Futuramente veremos mais sobre essa incrível obra do open source.
Se chegou até aqui, obrigado, e espero nos encontrarmos novamente!