Conhecendo o TypeScript

Para nós que trabalhamos ou estudamos Angular como framework, estamos familiarizados com o TypeScript e o que ele pode fazer.

Neste post irei apresentar para você que só ouviu falar ou não tem muita ideia do que se trata.

O que é TypeScript?

É um conjunto de ferramentas e formas de escrever o tradicional JavaScript, dando muitas possibilidades e também previsibilidade ao nosso querido código.

Ao contrário do que algumas pessoas podem pensar, o TypeScript não é uma linguagem de programação e sim um superset para JavaScript, pois o código é transformado (no termo correto: transcompilado) em JavaScript puro antes da execução do código. Vale ressaltar também que o TypeScript pode ser executado do lado do cliente e também do lado do servidor (Node.JS).

Apesar do avanço da tecnologia, os browsers ainda só entendem o JavaScript puro e por esse motivo, o TypeScript é transcompilado em JavaScript no final.

Básico do TypeScript

Uma grande parte das pessoas já passaram pelo problema de esperar um dado em string e receber number, codando em JS puro (ou algum problema parecido), caso você não tenha passado por isso, só espere um pouco mais, vai acontecer.

Só pelas tipagens em si o TS ganha uma grande vantagem para ser estudado e aprendido, fora os frameworks que trabalham com ele. Ao longo deste post, irei falar mais sobre ele e como ele trabalha, tentando assim mostrar as vantagens e dar um norte para você começar os estudos.

Estudando, aprendendo e construindo

Sou o tipo de pessoa que ao ser apresentado a pergunta: Como estudar e aprender uma linguagem? Respondo sempre o seguinte: estude a base e aprenda ela, construa um projeto em paralelo e veja os erros e aprenda com eles.

Pois vamos lá, vamos construir uma aplicação falsa (não vamos construir uma real, não é o intuito do post), nossa aplicação vai se tratar de uma hamburgueria. Vamos tratar de aprender um pouco do básico do TS com isso.

Em alguns momentos vai ser apresentado alguns termos mais conhecidos para quem tem alguma experiência com backend, mas não tenha receio, ao longo do post vou tentar explicar tudo bem direitinho para você não se perder.

Como eu disse em um post, não tenha pressa de aprender as coisas, cada um tem seu tempo. Você pode não morrer de amores pelo TS no começo, mas de uma chance para ele, construa uma aplicação e veja o que acha. Aposto que vai ter um retorno muito bacana e vai ser de muita valia a experiência com ele, vai dar várias possibilidades para trabalhar com ele, seja no front e backend.

Setup antes de tudo

Antes de começar de fato a mão na massa, vamos aos requisitos

NodeJS

Precisamos ter o NodeJS instalado em nossa máquina, você pode encontrar como fazer isso neste site Node.js (nodejs.org).

TypeScript

Vamos instalar o nosso TypeScript de maneira global, afinal de contas estamos aqui para isso

npm install -g typescript

IDE

Não custa falar que precisamos de uma IDE para codar, não sei se você caiu de paraquedas nesse post, então é por ele que escrevemos nossas linhas de códigos. Gosto muito do VsCode da Microsoft Visual Studio Code – Code Editing. Redefined. Só baixar e instalar, sem estresse.

Tipos primitivos

Como eu disse antes, não sei o seu nível de familiaridade com a programação, então vamos ao básico. Vou mostrar os tipos primitivos, mas eu aconselho você a estudar JS antes de ir para o TS direto, mas nada impede.

• String ‘Texto’;
• Number 123;
• Boolean true ou false;
• Undefined undefined;
• Null null;
• Object {};
• Function function nomeDaFunction(parametro) {o que faz}.

Vou dizer novamente, caso você não conheça esses tipos, de um tempo neste post e estude primeiro eles, tem muitos vídeos no YouTube, posts no google, é algo bem simples, mas é a base do nosso dia a dia.

Vamos usar esses tipos para construir nossa interface e ter uma referência do que esperar, como se fosse uma planta baixa de uma casa, sabemos o que esperar, sendo assim nossos Objetos e Classes tem um modelo para seguir.

// Começamos sempre com I antes do nome, assim fica declarativo que é uma interface
interface IHamburguer {
    nome: string;
    tamanho: number;
    acrescimo: string;
    preco: number;
    dobroDeRecheio: boolean;
}

Interface

É aqui que “assinamos um contrato” e dizemos para as classes qual vai ser o modelo a ser seguido, caso todos atributos da interface sejam obrigatórios, a classe deve possuir todos eles, porém podemos deixar um ou vários como opcionais. Com ela garantimos que as informações sejam preenchidas e não esqueçamos nem uma.

Com a IHanburguer, definimos que os atributos do nosso hamburguer são esses, todos eles têm que vir com nome, tamanho, acrescimo, preco e o dobroDeRecheio. Caso alguma delas não seja preenchida, vamos cometer um erro.

Como eu disse acima, podemos deixar algumas opcionais usando o “?”, ficando assim “nomeDaPropriedade?: string”, um exemplo com a interface acima:

// Começamos sempre com I antes do nome, assim fica declarativo que é uma interface
interface IHamburguer {
    nome: string;
    tamanho: number;
    acrescimo: string;
    preco: number;
    dobroDeRecheio?: boolean;
}

Sendo assim, a propriedade dobroDeRecheio pode ser ou não preenchida.

Agora vamos criar um objeto hamburguer e usar a nossa interface nele, dando assim o modelo a ser seguido.

const hamburguer: IHamburguer {
    nome: 'Simples',
    Tamanho: 2,
    acrescimo: 'Pepino, Molho de pimenta',
    preco: 15  
}

Perceba que desta forma não preenchemos o dobroDeRecheio, pois não é necessário, porém o resto foi definido, desta forma não iremos ter nem um erro.

Agora vamos fazer de uma forma que irá dar erro e vamos ver se você pega ele antes de eu explicar:

const hamburguer: IHamburguer {
  nome: 'Simples',
  Tamanho: 2,
  acrescimo: ['Pepino, Molho de pimenta'],
  preco: 15  
}

Este objeto irá retornar um erro.

Múltiplos valores

Caso você queira trabalhar com arrays, podemos fazer isso simplesmente adicionando em nossa interface, ficando desta forma:

interface IHamburguer {
    nome: string;
    tamanho: number;
    acrescimo: string[];
    preco: number;
    dobroDeRecheio?: boolean;
}

Agora este objeto vai ser totalmente válido:

const hamburguer: IHamburguer {
  nome: 'Simples',
  Tamanho: 2,
  acrescimo: ['Pepino, Molho de pimenta'],
  preco: 15  
}

É super simples trabalhar com diversos dados, assim vamos ter uma lista de itens e saber o que iremos receber.

Também podemos ter um array de objetos hamburguers.

const hamburguerArray: IHamburguer[] = []

Enums

Olhando bem para a nossa interface vemos que estamos colocando os “acréscimos” como um array de string, mas se pensarmos muito bem, não temos tantos ingredientes para colocar como adicionais assim né, podemos usar os enums para isso, deixando uma maneira bem esperta para lidar com isso.

Vamos imaginar que temos apenas quatro ingredientes para colocar como acréscimo no hamburguer. O código ficaria assim:

enum HamburguerAcrescimos {
  TOMATE = 0,
  PIMENTA = 1,
  NADA = 2
  PEPINO = 3
}

Agora vamos para a interface e vamos adicionar o enum lá:

 interface IHamburguer {
        nome: string;
        tamanho: number;
        acrescimo: HamburguerAcrescimos[];
        preco: number;
        dobroDeRecheio?: boolean;
    }

E nosso objeto ficaria desta forma para lidar com o enum:

   const hamburguer: IHamburguer {
        nome: 'Simples',
        Tamanho: 2,
        acrescimo: [HamburguerAcrescimos.TOMATE, HamburguerAcrescimos.PEPINO],
        preco: 15  
  }

Classes

Podemos usar a classe para criar tudo isso, mas vamos usar a nossa interface para fazer a validação das informações e garantir que tenha tudo que precisamos.

Ao contrário da interface, nossas classes podem conter métodos, getters e setters também.

Um ponto bem importante, a interface não é compilada no JS, então precisamos de uma classe para lidar com os dados.

 class Hamburguer {
        nome: string = '';
        tamanho: number = 2;
        acrescimo: HamburguerAcrescimos[] = [];
        preco: number = 0;
        dobroDeRecheio?: boolean = false;

      constructor(data: IHamburguer) {
          this.nome = data.nome;
          this.tamanho = data.tamanho;
          this.acrescimo = data.acrescimo;
          this.preco = data.preco;

          if(data.dobroDeRecheio) {
          this.dobroDeRecheio = data.dobroDeRecheio;
          }
      }
    }

Podemos também instanciar

   const hamburguer: IHamburguer = {
        nome: 'Simples', 
        Tamanho: 2, 
        acrescimo: [HamburguerAcrescimos.TOMATE, HamburguerAcrescimos.PEPINO], 
        preco: 15   
    }

   const simplesHamburguer = new Hamburguer(hambuerguer)

Array

Até o momento temos apenas um tipo de sanduíche, o que não é o ideal para um restaurante, vamos fazer agora uma lista deles e ver como o array pode nos ajudar nisso.

Pense no array como uma lista de dados, eles ficam guardados e podem ser acessados via index, que começa na posição 0, isso mesmo na posição 0 e a sequência vai de 0, 1, 2, 3…. ao infinito. Então para trabalharmos com lista de coisas, o array é ideal.

    class HamburguerCatalago {
      list: Hamburguer[] = [];

      constructor(list: Hamburguer[]) {
        this.list = list;
      }
    }

Estamos dizendo que a list é um array do tipo Hamburguer e iniciamos esse array vazio.

Agora vamos popular o array.

const CatalagoHamburguer = new HamburguerCatalago ([simplesHamburguer]);

Podemos criar novos sabores e acrescentar no array também.

    const saladHamburguer = new Hamburguer({
      nome: "Salad",
      tamanho: 1,
      acrescimo: [Hamburguer.TOMATE],
      preco: 12,
    });
  const pizzaCatalog = new PizzaCatalog([saladHamburguer, outroSabor]);

Podemos adicionar mais de uma por vez, sem problema algum.

Conclusão

Como podemos ver com o TS, podemos criar muitas maneiras de lidar com as informações e ter a certeza que tudo vai retornar o que precisamos e o que esperamos (salvo os bugs hehe), porém ao olhar cada responsabilidade em seu lugar, evita assim códigos longos e sabemos com muita facilidade onde cada coisa está.

Vale ressaltar que não é correto tipar tudo como any, vai funcionar? Vai, porém esse não é o objetivo do TS, com ele não sabemos o que está retornando, pois qualquer coisa é aceita com any.

Estude bastante o TS e com ele você será um ótimo programador Angular e também terá mais facilidade ao lidar com o NodeJS, caso seja necessário.