Conhecendo o TypeScript no Front-end

Ah, o maravilhoso mundo do desenvolvimento front-end, que se torna cada vez mais dinâmico graças ao JavaScript. Apesar do JavaScript ser a linguagem mais popular dessa área, também apresenta alguns desafios, como a falta de tipagem estática, a coerção implícita de tipos e a dificuldade de manutenção e escalabilidade do código.

Pensando nisso, neste artigo, vamos explorar o universo do TypeScript no desenvolvimento front-end, passando pelos tópicos:

• O que é o TypeScript?
• Como ele ajuda a garantir que seu código seja legível?
• Como configurar e compilar o TypeScript?

Vamos lá! 🙂

Desbravando o TypeScript

Imagina essa cena: você está trabalhando em um projeto com uma equipe de pessoas desenvolvedoras front-end, e cada uma de vocês está livre para codificar com o JavaScript à sua maneira. Com o tempo, a diversidade de abordagens começa a gerar erros. A manutenção do código começa a ficar mais complicada e a integração de novos recursos vira um quebra-cabeças.

Aqui é onde entra o TypeScript, um superconjunto de JavaScript que adiciona sintaxe para tipos. Ele é como ter um co-piloto, que certifica-se de que você não acabe com um código que só você entende. Com ele, as pessoas desenvolvedoras podem escrever códigos mais legíveis, confiáveis e seguros, aproveitando as vantagens do editor e do compilador. Pode ser usado para construir aplicações web usando frameworks JavaScript como Angular, React ou Vue.js.

Mas por que usar o TypeScript? A resposta é: colaboração e produtividade. Em projetos grandes, onde várias pessoas trabalham em conjunto, a tipagem estática do TypeScript é uma verdadeira bênção. Ela ajuda a evitar erros comuns no JavaScript, como acessar propriedades inexistentes, passar argumentos incorretos ou usar operadores inválidos. Isso significa menos tempo gasto caçando bugs e mais tempo desenvolvendo recursos incríveis.

Além disso, o TypeScript facilita a leitura do código, fornecendo informações claras sobre os tipos de dados e a estrutura do código. Isso é especialmente valioso quando você retorna a um projeto após algum tempo e precisa entender o que está acontecendo rapidamente.

Para entender melhor seu diferencial, podemos dizer que o TypeScript é uma linguagem tipada estaticamente, o que significa que os tipos das variáveis, funções e objetos são verificados em tempo de compilação, antes do código ser executado.

E na prática, como é usar o TypeScript em um código?

Imagine um cenário em que você está construindo um sistema de reserva de voos para uma grande companhia aérea. Para isso, você vai precisar guardar os valores do nome, idade e o status do plano de milhas do possível passageiro no momento da reserva. Pode ser que alguém tente enviar o valor de algum desses dados sem ser o tipo esperado e isso gere erros no projeto.

Caso você esteja usando o TypeScript, ele usa inferência de tipos para atribuir tipos automaticamente às variáveis e funções, sem a necessidade de anotações explícitas. Como, por exemplo:

let nome = "Maria"; // inferido como string
let idade = 25; // inferido como number
let ativo = true; // inferido como boolean

Com o TypeScript, as variáveis, funções e objetos têm tipos definidos, o que elimina muitos dos erros comuns do JavaScript. No exemplo do código, quando você declara uma variável "nome" e atribui a ela o valor "Maria", o TypeScript automaticamente a reconhece como uma string. Isso significa que, se alguém tentar fazer uma operação matemática com ela, o TypeScript vai emitir um alerta, evitando erros sutis e, muitas vezes, difíceis de diagnosticar.

No entanto, às vezes é necessário especificar os tipos manualmente, para dar mais informações ao compilador e ao editor. Ainda na situação do sistema de reserva de passagens, há a funcionalidade de somar o valor das passagens que serão reservadas. Para isso, poderíamos criar uma função somar, por exemplo:

function somar(passagemIda: number, passagemVolta: number): number {
  return passagemIda + passagemVolta;
}

Neste caso, os parâmetros passagemIda e passagemVolta, bem como o retorno da função, são anotados com o tipo “number”, indicando que só podem receber e retornar valores numéricos. Essas anotações não são apenas uma documentação para outros desenvolvedores, mas também uma camada extra de segurança.

Esse superconjunto também permite definir tipos personalizados, usando interfaces ou tipos alias. As interfaces descrevem a forma dos objetos e funções no código, permitindo visualizar a documentação e identificar problemas no editor.

Já sabemos que o nosso usuário possui os dados nome, idade e status do plano. Para criar uma interface com esses dados, e construir uma funcionalidade de enviar e-mail para ele, podemos fazer o seguinte:

interface Usuario {
  nome: string;
  idade: number;
  ativo: boolean;
}
function enviarEmail(usuario: Usuario) {
  console.log(`Enviando email para ${usuario.nome}, que tem (${usuario.idade} anos)`);
}

Neste caso, a interface “Usuario” define as propriedades que um objeto do tipo “Usuario” deve ter. Isso não apenas ajuda você a entender rapidamente como os dados estão estruturados, mas também fornece uma forma de documentação para a sua equipe. Além disso, temos a função ´enviarEmail´ que determinamos que recebe um parâmetro do tipo “Usuario”, garantindo que ele tenha as propriedades nome e idade.

Por outro lado, os tipos alias permitem criar nomes alternativos para tipos existentes. Imagine que você precisa lidar com o status de pedidos, que pode ser "aprovado," "reprovado" ou "pendente." Criar um tipo alias "Resultado" ajuda a tornar o código mais legível e seguro. Um exemplo de código onde isso seria aplicado é o seguinte:

type Resultado = "aprovado" | "reprovado" | "pendente";
function verificar(resultado: Resultado) {
  if (resultado === "aprovado") {
    console.log("Parabéns!");
  } else if (resultado === "reprovado") {
    console.log("Que pena!");
  } else {
    console.log("Aguarde!");
  }
}

Nesse caso, o tipo alias “Resultado” representa um dos três valores possíveis: "aprovado", "reprovado" ou "pendente". A função “verificar” recebe um parâmetro do tipo “Resultado”, garantindo que ele seja um desses valores.

Configurando e compilando seu primeiro projeto TypeScript

Agora, vamos mergulhar em como configurar e compilar seu projeto TypeScript. Primeiro, você precisa instalar o TypeScript globalmente no seu sistema usando o comando:

npm install -g typescript

Isso dá a você a capacidade de usar o comando "tsc" para transformar seu código TypeScript em JavaScript.

Mas por que precisamos transformar o código?

Embora o TypeScript seja uma ferramenta poderosa para desenvolvedores, ele não é diretamente compreendido pelos navegadores da web. Os navegadores entendem apenas JavaScript, não TypeScript.

Portanto, quando desenvolvemos aplicativos ou sites em TypeScript, é necessário converter o código TypeScript em JavaScript. Isso é feito por meio de um processo chamado de "transpilação", que é a transformação do código de uma linguagem (no caso, TypeScript) em código equivalente em outra linguagem (JavaScript).

Antes de utilizar o comando tsc, recomendamos a criação de um arquivo "tsconfig.json" na raiz do seu projeto. Esse arquivo contém configurações essenciais para o compilador, como a versão de saída do JavaScript, o sistema de módulos e o diretório de saída. Veja o exemplo abaixo:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist", 
    "strict": true
  }
}

E agora, vamos conhecer o que cada uma dessas configurações afeta no nosso projeto?

• "compilerOptions": este é um conjunto de regras que você está definindo para o compilador TypeScript, como um guia para ele saber como transformar seu código TypeScript em código JavaScript. É como dizer ao compilador o que fazer.
• "target: "es5": aqui você está dizendo para o compilador que você quer que seu código seja traduzido para uma versão mais antiga do JavaScript chamada ES5. Isso é importante se você precisa que seu código funcione em navegadores antigos que não entendem as versões mais recentes do JavaScript.
• "module: "commonjs": essa configuração define como o código deve ser organizado em módulos. O "commonjs" é um formato comum usado em ambientes Node.js. Basicamente, isso ajuda a organizar seu código em partes separadas para que seja mais fácil de gerenciar.
• "outDir: "./dist": isso diz ao compilador onde colocar os arquivos JavaScript que ele cria a partir do seu código TypeScript. Neste caso, os arquivos JavaScript serão colocados em uma pasta chamada "dist" no diretório principal do seu projeto.
• "strict: true": essa opção faz com que o TypeScript seja muito rigoroso ao verificar os tipos de dados em seu código. Se você configurar como "true," ele será mais cuidadoso e ajudará a evitar erros de tipo, o que é ótimo para manter seu código seguro e sem bugs.

Com a configuração definida, basta executar o comando "tsc" no terminal para que o TypeScript transforme seus arquivos em código JavaScript. Assim, você está pronto para usar seu código em qualquer navegador ou ambiente desejado.

Conclusão

À medida que exploramos o TypeScript no desenvolvimento front-end é importante lembrar que aprender novas tecnologias pode parecer um desafio no início. No entanto, é exatamente assim que a jornada de uma pessoa desenvolvedora se desenrola. Não desista quando encontrar obstáculos. Em vez disso, veja-os como oportunidades para crescer e melhorar suas habilidades.

Este artigo ofereceu uma introdução ao TypeScript e a sua importância no desenvolvimento front-end. Agora, é hora de você aprofundar seus conhecimentos, experimentar o TypeScript em seus projetos e continuar aprendendo. Não deixe de visitar a formação TypeScript: desenvolva front-end com mais produtividade, que fornece uma trilha pensada especialmente pra você!

Além disso, não deixe de contar pra gente como está sendo seus estudos, marcando os perfis da Alura em suas redes sociais e usando a hashtag #AprendiNaAlura.

Até a próxima!