Aula 3 – Aprendendo TypeScript na Prática: Tuplas, Enums e o Tipo any

Introdução

Quando começamos a estudar TypeScript vindo do JavaScript, uma das primeiras mudanças que notamos é o uso de tipos. O TypeScript adiciona uma camada de segurança e previsibilidade ao código, evitando muitos erros que só seriam percebidos durante a execução no JavaScript.

Essa aula faz parte de uma série voltada para desenvolvedores iniciantes que estão migrando para o TypeScript. Hoje, vamos aprender três conceitos fundamentais: Tuplas (Tuples), Enums e o tipo any. Esses recursos ajudam a controlar melhor os tipos de dados e tornam o código mais confiável e organizado.

Ao final desta leitura, você vai entender como usar cada um deles e em quais situações aplicá-los no seu dia a dia como desenvolvedor.

Ambiente de Prática

Antes de começar, você pode testar todos os exemplos no TypeScript Playground (https://www.typescriptlang.org/play).
Se preferir rodar localmente, siga estes passos simples:

1. Crie uma pasta para o projeto.
2. Execute npm init -y no terminal para iniciar o projeto Node.
3. Instale o TypeScript com npm install typescript -D.
4. Crie um arquivo index.ts e escreva o código nele.
5. Compile com npx tsc index.ts ou execute diretamente com npx ts-node index.ts.

Com o ambiente pronto, BORA CODAR!!!

Parte 1: Tuplas (Tuples)

O que são Tuplas

Em JavaScript, os arrays podem conter elementos de qualquer tipo.
No TypeScript, as tuplas são uma forma especial de array onde sabemos exatamente quantos elementos existirão e qual será o tipo de cada um.

Uma tupla é ideal para representar estruturas fixas, como coordenadas, pares chave-valor ou retornos múltiplos de uma função.

Exemplo Básico

let pessoa: [string, number] = ["Guilherme", 20];
console.log(pessoa);

Explicação linha por linha:

1. let pessoa: [string, number] → declaramos uma variável chamada pessoa e informamos que ela será uma tupla com duas posições, a primeira do tipo string e a segunda do tipo number.
2. = ["Guilherme", 20] → atribuimos valores que respeitam essa ordem.
3. console.log(pessoa) → imprime o conteúdo completo da tupla.

Se tentássemos inverter a ordem, TypeScript mostraria erro, pois o tipo de cada posição é fixo.

Elementos Opcionais

Podemos permitir que uma posição seja opcional usando ?.

let produto: [string, number?, boolean?];

produto = ["Mouse"];
produto = ["Teclado", 120];
produto = ["Monitor", 800, true];

Explicação:

• O segundo e o terceiro elementos são opcionais.
• Isso é útil quando a tupla representa informações que podem variar em quantidade, mas têm uma estrutura previsível.

Tuplas Somente Leitura

Se quisermos garantir que os valores da tupla não serão alterados, podemos usar readonly.

let coordenadas: readonly [number, number] = [10, 20];
// coordenadas[0] = 30; // Erro: tupla é somente leitura

Explicação:

• O readonly impede qualquer modificação após a atribuição inicial.
• Esse recurso é útil para representar dados imutáveis, como coordenadas geográficas ou posições fixas em um layout.

Quando Usar Tuplas

Use tuplas quando:

• A estrutura e a ordem dos dados são conhecidas.
• Você precisa representar pares ou conjuntos fixos.
• Há necessidade de garantir imutabilidade com readonly.

Um exemplo real é o retorno de uma função que devolve mais de um valor:

function useState(): [number, (n: number) => void] {
  let valor = 0;
  function setValor(novo: number) {
    valor = novo;
  }
  return [valor, setValor];
}

const [valor, setValor] = useState();
setValor(5);

Essa estrutura é semelhante ao padrão usado no React, que retorna uma tupla [estado, funçãoDeAtualização].

---

Parte 2: Enums

O que são Enums

Enums (de enumerations) permitem criar um conjunto de valores nomeados, facilitando a leitura e manutenção do código.
Eles não existem no JavaScript puro, mas o TypeScript os compila para um objeto equivalente.

Enums são úteis para representar opções fixas — como status, tipos de usuário ou categorias.

Enum Numérico

enum StatusPedido {
  Pendente,
  Enviado,
  Entregue
}

let statusAtual: StatusPedido = StatusPedido.Enviado;
console.log(statusAtual);

Explicação:

1. Criamos um enum chamado StatusPedido.
2. Os valores começam automaticamente em 0 (Pendente = 0, Enviado = 1, Entregue = 2).
3. A variável statusAtual recebe o valor StatusPedido.Enviado.
4. No console, será exibido o número 1, correspondente ao valor do enum.

Enum de String

enum TipoUsuario {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Visitante = "VISITANTE"
}

let usuario: TipoUsuario = TipoUsuario.Editor;
console.log(usuario);

Explicação:

• Cada valor do enum é uma string literal.
• Enums de string são mais legíveis e geralmente preferidos em APIs e logs.

Enum Heterogêneo (apenas para conhecer)

Enums heterogêneos misturam números e strings, mas são pouco usados por dificultarem a leitura.

enum Exemplo {
  A = 1,
  B = "Texto"
}

Por Que Usar Enums

Enums tornam o código mais semântico e organizado, evitando erros de digitação e facilitando manutenção.

Exemplo prático:

function verificarAcesso(tipo: TipoUsuario) {
  if (tipo === TipoUsuario.Admin) {
    console.log("Acesso total permitido");
  } else {
    console.log("Acesso restrito");
  }
}

verificarAcesso(TipoUsuario.Visitante);

Esse exemplo evita erros como comparar strings diretamente (if (tipo === "admin")) e garante consistência.

---

Parte 3: any e a Tipagem Fraca

O que é o Tipo any

O tipo any diz ao TypeScript para não verificar o tipo de uma variável.
É como dizer: “confie em mim, eu sei o que estou fazendo”.
Na prática, é o mesmo comportamento do JavaScript.

let valor: any = "Texto";
valor = 10;
valor = true;

Explicação:

• A variável valor pode receber qualquer tipo.
• Isso elimina os benefícios da tipagem estática do TypeScript.

O Perigo de Usar any

Usar any em excesso pode causar erros difíceis de identificar.
Imagine um projeto grande onde o tipo de uma variável muda sem aviso — o código pode quebrar sem que o TypeScript perceba.

Quando Usar any com Consciência

Há casos específicos em que any pode ser aceitável:

• Ao migrar código JavaScript antigo para TypeScript.
• Quando você ainda não sabe o formato exato de um dado externo (ex: resposta de uma API desconhecida).

Mas mesmo nesses casos, é melhor tentar usar unknown, que exige uma verificação de tipo antes do uso.

Exemplo Ruim

function calcular(x: any, y: any) {
  return x + y;
}

console.log(calcular("5", 10)); // Resultado inesperado: 510

Explicação:
Sem tipos definidos, o TypeScript não impede que x e y sejam strings, resultando em concatenação em vez de soma.

Exemplo Melhor com Tipos

function calcular(x: number, y: number) {
  return x + y;
}

console.log(calcular(5, 10)); // Saída correta: 15

Exemplo com unknown

let dado: unknown = "Olá";

if (typeof dado === "string") {
  console.log(dado.toUpperCase());
}

Explicação:
Com unknown, o TypeScript exige uma verificação de tipo antes do uso, mantendo a segurança do código.

---

Conclusão

Hoje aprendemos três conceitos importantes do TypeScript: Tuplas, Enums e o tipo any.
As tuplas ajudam a definir estruturas fixas e previsíveis.
Os enums tornam o código mais legível e organizado.
E o tipo any, apesar de flexível, deve ser usado com cautela, pois remove a segurança da tipagem estática.

Agora é hora de praticar. Abra o Playground ou seu editor, teste cada exemplo, mude os valores e veja como o TypeScript reage. É assim que o aprendizado realmente se consolida.

🔗Repositório no Github: https:

github.com/guilherme-silvam/TS-aulas-guilhermemachadodev/tree/main/typescript-aula-3