Para quem ainda não conhece TypeScript, ele é uma linguagem de código aberto desenvolvida pela Microsoft que nos permite trabalhar com tipagens, classes e interfaces.
Quem já trabalha com Orientação a Objetos, consegue ter um aprendizado muito rápido, pois seu desenvolvimento foi baseado nesse paradigma. Bom, indo direto ao ponto desse artigo, os navegadores não interpretam códigos TypeScript. Para que os navegadores possam interpretar o nosso código, nós precisamos fazer um transpile dos nossos arquivos .ts para .js.
Até aqui tranquilo, pois para esse processo, somente precisamos configurar um arquivo chamado tsconfig.json para que o TypeScript faça esse transpile para nossa aplicação. Mas e quando nós trabalhamos com bibliotecas de terceiros? O TypeScript também consegue gerar e compilar esses arquivos? Bom, para esse processo, nós precisamos importar um arquivo chamado nome_da_biblioteca.d.ts de Type Definition, esse arquivo geralmente é desenvolvido pelos autores das bibliotecas ou pela comunidade de desenvolvedores.
Vejamos um exemplo de como podemos importar uma biblioteca chamada Sweetalert para o nosso código e seu arquivo de Type para que o nosso compilador “cale a boca” (como o pessoal da comunidade costuma se referir a esse processo).
Nosso primeiro passo será escolhermos um diretório para o nosso exemplo, em seguida, crie uma pasta com um nome de sua escolha. Nós iremos dar o nome de typeScript-td. Agora abra o seu terminal, navegue até o seu diretório e execute o comando npm init -y para que possamos gerar o nosso arquivo package.json, em seguida crie um novo arquivo chamado tsconfig.json e cole o código abaixo dentro ele:
{
"compilerOptions": {
"target": "es6",
"outDir": "app/dist/js"
},
"include": [
"app/ts/**/*"
]
}
Vamos entender o código acima:
target: nós estamos passando a versão do ecmascript.
outdir: estamos passando o diretório que o nosso compilador ira utilizar armazenar para gerar os nossos arquivos .js.
include: diretório que o nosso compilador irá precisar explorar para gerar os nossos arquivos .js.
Agora nós precisamos baixar as bibliotecas necessárias para o nosso exemplo:
npm install typescript --save npm install sweetalert --save
Nosso próximo passo será criação da estrutura de pastas do nosso projeto. Abra a sua IDE de preferência e crie uma estrutura conforme a imagem a baixo:
Uma revisão do que fizemos até agora: criamos o nosso projeto, em seguida criamos o arquivo de configuração do TypeScrpt, importamos a biblioteca do TypeScript e do SweetAltert. E por fim, nós criamos uma estrutura básica para que possamos validar o nosso código. Agora, com a sua estrutura aberta na sua IDE, vamos popular os arquivos index.html e message.ts:
Index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>TypeScript</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><script src="app/dist/js/messages.js"></script>
<script src="app/dist/js/app.js"></script>
</body>
</html>
message.ts
class Message {
private swal : "sweetalert";
constructor() {
swal("Hello world!");
}
}
Podemos observar que o nosso compilador já está reclamando que não conhece a biblioteca swal. Para resolvermos esse problema, precisamos de um arquivo de type definition da biblioteca Sweetalert que podemos buscar no link: buscando type. Para acharmos qualquer arquivo de Type, basta seguirmos o passo conforme a imagem abaixo:
Com o @type importado, agora precisamos fechar a nossa IDE e abrir ela novamente para que o nosso compilador reconheça o novo arquivo de type. Abra o diretório node_modules/@types/sweetalert/index.d.ts. Notem que temos um novo arquivo com todas as marcações necessárias para trabalharmos com o Sweetalert. Agora precisamos atualizar o nosso arquivo package.json para que o TypeScript possa gerar os nossos arquivos .js:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "tsc",
"start": "tsc -w"
},
Em seguida, execute o comando npm start, ele ficará monitorando o nosso código em tempo real, gerando os nossos arquivos .js. Nosso próximo passo será gerar o arquivo responsável por instanciar a nossa classe. Para isso, crie um novo arquivo chamado app.ts e cole o código abaixo dentro dele.
const controller = new Message();
A execução dos passos anteriores irá gerar um novo diretório na nossa solution chamado dist e dentro dele, dois novos arquivos messages.js e app.js.
Vamos testar o nosso código. Abra o seu arquivo index.html em um navegador de sua preferência. Para esse exemplo nós iremos utilizar o Chrome. Caso todos os passos tenham sido executados corretamente você ira receber uma mensagem conforme a imagem abaixo:
Com isso, finalizamos mais esse artigo. Caso queira ver como ficou o código final desse artigo, ele esta no Git no link.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?