Tuplas em TypeScript - O que são e quando utilizar

Introdução O TypeScript adiciona tipagem estática ao JavaScript e tuplas são um tipo de recurso para estruturar dados de maneira avançada. Este artigo tem como objetivo trazer de maneira clara e objetiva como tuplas podem ser úteis, sintaxe, sua comparação com arrays, exemplos de casos de uso e boas práticas. O que são Tuplas? Na ciência da computação, tuplas são estruturas de dados finitas, ordenadas e heterogêneas e que, diferentemente de arrays, que são homogêneos e dinâmicos, são mais restritas armazenando tipos específicos quanto a índice e comprimento, idealmente para modelo de dados com formatos previsíveis. Exemplo inicial: let person: [string, number] = ["Maria", 33]; // Tupla = name (string) + age (number) Por definição: Tuplas são estruturas que armazenam um número fixo de elementos cada qual com seu tipo específico. Muito útil quando a ordem e o tipo dos elementos importa, por exemplo coordenadas geográficas de um mapa: [x: number, y: number]. Exemplo básico contendo acerto e erro: let person: [string, number] = ["John", 30]; // ✅ Correto! let person: [string, number] = [30, "John"]; // ❌ Erro: ordem invertida Quando e por que usar? Quando a estrutura, ordem e tipos realmente é importante e precisa ser respeitada. Evitar erros de tipagem por exemplo receber uma string quando na verdade o ideal seria um boolean. Sintaxe Definição simples: let user: [string, number, boolean] = ["John", 30, true]; // name, age, active Acessando valores Funciona de maneira similar a um array: console.log(user[0]); // output: "John" console.log(user[1]); // output: 30 Erros que devem ser evitados Tuplas, assim como arrays, também recebem métodos e um deles é o push(). Métodos como push() devem ser evitados ao máximo pois mudam completamente a estrutura de uma tupla: let user: [string, number, boolean] = ["John", 30, true]; // name, age, active user.push("Doe"); // ❌ TypeScript aceita mas deve ser evitado. Exemplos práticos Exemplos com listas específicas: let rgb: [number, number, number] = [255, 55, 0]; // Aguarda valores relativos a cores em RGB Dados de um formulário let regiter: [string, string, number] = ["john@gmail.com", "password123", 1990]; Dicas básicas Na medida do possível, use nomes descritivos: type Coordinates = [x: number, y: number]; // Nome apropriado para a estrutura esperada Prefira objetos em casos mais complexos Em situações em que por exemplo, uma estrutura vem aninhada a muitas informações, objetos são mais aceitáveis do que tuplas: type UserTuple = [string, string, number, boolean]; const user: UserTuple = ["John", "john@gmail.com", 30, false]; console.log(user[3] ? "Active" : "Inactive"); // ❌ O acesso a informação fica mais difícil e ilegível. Quando estruturas tendem as ser mais complexas, tuplas deixam de ser a melhor opção pois torna-se mais difícil acessar as informações desejadas. Quando objetos são melhores: type User = { name: string; email: string; age: number; isActive: boolean; }; const user: User = { name: "John", email: "john@gmail.com", age: 30, isActive: true, }; console.log(user.isActive ? "Ativo" : "Inativo"); // ✅ Legível Regra Geral 1.Use tuplas para dados simples, ordenados e imutáveis. 2.Prefira objetos para dados complexos, nomeados e mutáveis. Conclusão Tuplas podem ser muito úteis especialmente se você depende de um resultado controlado e previsível de dados. Entretanto, se necessita de uma estrutura mais complexa e que pode conter variações em relação ao tipo e comprimento, objetos são mais indicados.

May 10, 2025 - 15:02

Tuplas em TypeScript - O que são e quando utilizar

Introdução

O TypeScript adiciona tipagem estática ao JavaScript e tuplas são um tipo de recurso para estruturar dados de maneira avançada.

Este artigo tem como objetivo trazer de maneira clara e objetiva como tuplas podem ser úteis, sintaxe, sua comparação com arrays, exemplos de casos de uso e boas práticas.

O que são Tuplas?

Na ciência da computação, tuplas são estruturas de dados finitas, ordenadas e heterogêneas e que, diferentemente de arrays, que são homogêneos e dinâmicos, são mais restritas armazenando tipos específicos quanto a índice e comprimento, idealmente para modelo de dados com formatos previsíveis.

Exemplo inicial:

let person: [string, number] = ["Maria", 33]; // Tupla = name (string) + age (number)

Por definição:

Tuplas são estruturas que armazenam um número fixo de elementos cada qual com seu tipo específico. Muito útil quando a ordem e o tipo dos elementos importa, por exemplo coordenadas geográficas de um mapa: [x: number, y: number].

Exemplo básico contendo acerto e erro:

let person: [string, number] = ["John", 30]; // ✅ Correto!
let person: [string, number] = [30, "John"];  // ❌ Erro: ordem invertida

Quando e por que usar?

Quando a estrutura, ordem e tipos realmente é importante e precisa ser respeitada.
Evitar erros de tipagem por exemplo receber uma string quando na verdade o ideal seria um boolean.

Sintaxe

Definição simples:

let user: [string, number, boolean] = ["John", 30, true]; // name, age, active

Acessando valores

Funciona de maneira similar a um array:

console.log(user[0]);
// output: "John"

console.log(user[1]);
// output: 30

Erros que devem ser evitados

Tuplas, assim como arrays, também recebem métodos e um deles é o push().
Métodos como push() devem ser evitados ao máximo pois mudam completamente a estrutura de uma tupla:

let user: [string, number, boolean] = ["John", 30, true]; // name, age, active

user.push("Doe"); // ❌ TypeScript aceita mas deve ser evitado.

Exemplos práticos

Exemplos com listas específicas:

let rgb: [number, number, number] = [255, 55, 0]; // Aguarda valores relativos a cores em RGB

Dados de um formulário

let regiter: [string, string, number] = ["john@gmail.com", "password123", 1990];

Dicas básicas

Na medida do possível, use nomes descritivos:

type Coordinates = [x: number, y: number]; // Nome apropriado para a estrutura esperada

Prefira objetos em casos mais complexos

Em situações em que por exemplo, uma estrutura vem aninhada a muitas informações, objetos são mais aceitáveis do que tuplas:

type UserTuple = [string, string, number, boolean];

const user: UserTuple = ["John", "john@gmail.com", 30, false];

console.log(user[3] ? "Active" : "Inactive"); // ❌ O acesso a informação fica mais difícil e ilegível.

Quando estruturas tendem as ser mais complexas, tuplas deixam de ser a melhor opção pois torna-se mais difícil acessar as informações desejadas.

Quando objetos são melhores:

type User = {
  name: string;
  email: string;
  age: number;
  isActive: boolean;
};

const user: User = {
  name: "John",
  email: "john@gmail.com",
  age: 30,
  isActive: true,
};

console.log(user.isActive ? "Ativo" : "Inativo"); // ✅ Legível

Regra Geral

1.Use tuplas para dados simples, ordenados e imutáveis.

2.Prefira objetos para dados complexos, nomeados e mutáveis.

Conclusão

Tuplas podem ser muito úteis especialmente se você depende de um resultado controlado e previsível de dados.
Entretanto, se necessita de uma estrutura mais complexa e que pode conter variações em relação ao tipo e comprimento, objetos são mais indicados.