DEV Community

Cover image for Desbravando TypeScript com a Magia da Terra Média
Vânia Gomes
Vânia Gomes

Posted on

3

Desbravando TypeScript com a Magia da Terra Média

Um passo essencial para se aprofundar em desenvolvimento Front-end é aprender TypeScript. Esse superconjunto do JavScript oferece uma experiência mais robusta ao trabalhar com tipos e orientação a objetos, e pode ser integrado a diferentes frameworks para alcançar resultados poderosos.

Neste artigo, você explorará conceitos avançados de TypeScript, como generics, enumerations, decorators, e interfaces, descobrirá as vantagens da tipagem estática e a adotar as melhores práticas para utilizar os recursos do TypeScript. Ao seguir essa trilha de aprendizado, você avançará no paradigma da Orientação a Objetos!

Tipos em TypeScript

Pense nos tipos em TypeScript como as raças da Terra Média. Cada raça tem suas características únicas e habilidades especiais. No TypeScript, você define a "raça" das suas variáveis, garantindo que o compilador saiba exatamente como elas devem se comportar. Isso impede, por exemplo, que você tente usar a força bruta de um anão para lançar feitiços, ou que um elfo tente lutar com o cajado de Saruman.

Vamos ver isso em ação:

interface Mago {
  nome: string;
  nivel: number;
  lancarFeitico: (feitico: string) => string;
}

const gandalf: Mago = {
  nome: "Gandalf",
  nivel: 20,
  lancarFeitico: (feitico: string) => {
    return `Lançando ${feitico}...`;
  }
};
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo, nome, nivel e lancarFeitico são as propriedades de Gandalf, nosso personagem, cada um com sua "raça" ou tipo definido: string, number, e function. Assim como não esperaríamos que Gandalf empunhasse uma espada como um guerreiro, o TypeScript não permitirá que você atribua um number a uma string, mantendo seu código livre de inconsistências, como se fossem orcs nas Montanhas Sombrias.

Generics

Generics em TypeScript são como uma capa mágica que pode se ajustar a qualquer personagem na Terra Média, oferecendo proteção a todos, independentemente de quem a veste. Imagine que você tem uma função que pode ser usada por hobbits, elfos ou anões, e ela sempre oferece uma proteção especial para quem a utiliza.

function usarPoder<T>(portador: T): T {
    console.log(`${portador} usou o Anel de Poder!`);
    return portador;
}

let frodo = usarPoder<string>("Frodo");
let legolas = usarPoder<string>("Legolas");

Enter fullscreen mode Exit fullscreen mode

Essa função genérica permite que qualquer personagem use o poder do Anel, retornando o personagem que o utilizou. Generics tornam seu código mais flexível e reutilizável, assim como a capa mágica que se adapta a qualquer portador, sem a necessidade de criar uma capa específica para cada personagem.

O uso do na definição da função usarPoder(portador: T): T é o que caracteriza o recurso Generics em TypeScript. O T é um parâmetro de tipo que representa um tipo genérico, permitindo que a função usarPoder trabalhe com qualquer tipo que seja especificado no momento da chamada da função.

Essa função genérica permite que qualquer personagem use o poder do Anel, retornando o personagem que o utilizou. Generics tornam seu código flexível, como uma capa mágica que se adapta a qualquer portador, eliminando a necessidade de criar uma capa específica para cada personagem.

A grande vantagem de usar Generics é a simplicidade: com uma única função, você pode lidar com diferentes tipos de dados, mantendo a segurança e a clareza do código, sem duplicações.

Enums

Enums em TypeScript são como as raças da Terra-média (hobbits, elfos, anões, etc.). Eles permitem que você escolha uma dessas raças como se estivesse selecionando uma classe em um jogo.

enum Raca {
    Hobbit = "Hobbit",
    Elfo = "Elfo",
    Anao = "Anão",
    Humano = "Humano"
}

let personagem: Raca = Raca.Hobbit;
console.log(`Você escolheu a raça: ${personagem}`);
Enter fullscreen mode Exit fullscreen mode

Aqui, Raca é um Enum que define as opções de raças na Terra-média. Ao escolher Raca.Hobbit, você seleciona a raça de hobbits, garantindo que apenas raças válidas sejam escolhidas, evitando erros no código.

O uso da palavra-chave enum seguida da definição de Raca é o que caracteriza o recurso Enum em TypeScript. Isso cria um conjunto de opções nomeadas, que pode ser utilizado de forma segura e legível.

O maior benefício de usar Enums é que eles fornecem uma maneira clara e segura de trabalhar com conjuntos de valores fixos, como as raças na Terra-média. Isso evita erros, já que o compilador garante que apenas valores permitidos sejam usados, tornando o código mais robusto e fácil de entender.

Decorators

Decorators em TypeScript são como o escudo mágico dado por Galadriel. Esse escudo entra em ação automaticamente toda vez que Frodo enfrenta um orc, garantindo sua proteção.

function EscudoMagico(target: any, propertyKey: string) {
    console.log(`${propertyKey} recebeu um escudo mágico!`);
}

class Frodo {
    @EscudoMagico
    enfrentarOrc(): void {
        console.log("Frodo enfrentou o orc!");
    }
}

let frodo = new Frodo();
frodo.enfrentarOrc();
Enter fullscreen mode Exit fullscreen mode

Aqui, @EscudoMagico é um decorator que adiciona uma proteção especial ao método enfrentarOrc. Toda vez que Frodo usa esse método, o escudo mágico é ativado, garantindo que ele esteja sempre protegido.

O símbolo @ seguido do nome da função (@EscudoMagico) caracteriza o recurso de Decorators em TypeScript. Decorators são usados para modificar ou adicionar funcionalidades a classes e métodos de maneira elegante e declarativa.

O diferencial mais significativo ao usar Decorators é que eles permitem adicionar comportamento adicional a classes ou métodos sem alterar diretamente o código original. Isso torna o código mais modular e fácil de manter, ao mesmo tempo em que proporciona uma maneira clara e organizada de aplicar funcionalidades extras, como o escudo mágico que protege Frodo.

Lembre-se de usar estes artefatos do TypeScript de forma assertiva:

  • Interfaces devem ser usadas para definir tipos coerentes e relacionados.

  • Decorators devem ser usados para adicionar comportamento sem alterar o comportamento esperado dos métodos ou classes.

  • Enums são para valores constantes e não devem ser usados para dados que podem mudar frequentemente.

  • Generics devem ser aplicados quando há uma necessidade clara de flexibilidade de tipo, e o código deve ser adequado a essa versatilidade.

Conclusão

Em suma, TypeScript oferece um conjunto robusto de funcionalidades que aprimoram significativamente a experiência de desenvolvimento em comparação ao JavaScript puro. Por trazer uma camada ao JS, possibilita um feedback mais ágil no desenvolvimento e na prevenção de bugs que poderiam ser identificados apenas em tempo de execução, melhorando assim a legibilidade e a manutenibilidade do código. Assim como um bom elmo que protege o elfo, TypeScript protege o seu código e torna sua jornada de desenvolvimento mais segura e eficiente.

Bibliografia

A documentação: https://www.typescriptlang.org/docs/
Alura: https://www.alura.com.br/artigos/o-que-e-typescript

👋 Kindness is contagious

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Get started

Thank you!

Top comments (1)

Collapse
 
geovanesou profile image
Geovane Souza

Concluí introdução ao NodeJS essa madrugada e estou emendando: iniciando Typescript hoje: seu texto me deixou bastante entusiasmado. Obrigado!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay