Desestruturando Tuplas

Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy — lição 17 de 73.

Embora o acesso a elementos de tuplas por índice funcione perfeitamente, existe uma maneira ainda mais elegante de extrair valores de tuplas: destructuring. Este recurso do JavaScript funciona perfeitamente com as tuplas tipadas do TypeScript, permitindo que você descompacte os valores da tupla em variáveis separadas em uma única linha.

A desestruturação de arrays usa colchetes no lado esquerdo de uma atribuição para criar novas variáveis que correspondem a cada posição na tupla:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (o TypeScript sabe que isso é um número)
console.log(name); // "Alice" (o TypeScript sabe que isso é uma string)

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma tupla chamada employee que contenha um número (ID do funcionário) seguido por uma string (nome do funcionário). Inicialize-a com o ID 1001 e o nome "Sarah Johnson".

Use a desestruturação para extrair os valores da tupla employee em duas variáveis separadas chamadas empId e empName.

Crie outra tupla chamada coordinates que contenha dois números representando as coordenadas de latitude e longitude. Inicialize-a com os valores 40.7128 e -74.0060.

Use a desestruturação para extrair os valores da tupla location em duas variáveis separadas chamadas latitude e longitude.

Imprima as variáveis desestruturadas na seguinte ordem, cada uma em uma linha separada:

Imprima o ID do funcionário
Imprima o nome do funcionário
Imprima a latitude
Imprima a longitude

Folha de consulta

A desestruturação permite extrair valores de tuplas em variáveis separadas em uma única linha usando colchetes:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (o TypeScript sabe que isso é um número)
console.log(name); // "Alice" (o TypeScript sabe que isso é uma string)

O TypeScript mantém as informações de tipo para cada variável desestruturada com base na definição de tipo da tupla.

Experimente você mesmo

// TODO: Escreva seu código aqui
// Crie a tupla de funcionário com ID 1001 e nome "Sarah Johnson"
// Use a desestruturação para extrair empId e empName
// Crie a tupla de coordenadas com os valores 40.7128 e -74.0060 (evite usar 'location' como nome de variável)
// Use a desestruturação para extrair latitude e longitude
// Imprima todas as quatro variáveis na ordem especificada

// Imprima os resultados (descomente e modifique conforme necessário)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.