¿Cómo funciona la desestructuración de tuplas en TypeScript?

Las tuplas en TypeScript son básicamente una array simple con una longitud definida y un tipo de datos definido. Desestructurar significa romper la estructura. En este artículo veremos cómo funciona la desestructuración de tuplas en TypeScript.

Desestructurar es simplemente dividir en partes y asignar variables. Los elementos de tupla se están rompiendo en su parte. podemos romper la tupla con la ayuda del operador de asignación.

Ejemplo: ejemplo simple de desestructuración de tuplas.

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let stud1 = Student[0];
let stud2 = Student[1];
let stud3 = Student[2];

En esta desestructuración de tupla, simplemente rompemos manualmente el valor de la tupla y lo asignamos a la variable. En la desestructuración, básicamente asignamos el valor de cada elemento de la tupla a alguna variable. Este es el ejemplo básico de desestructuración de una tupla. Tenemos una sintaxis más desestructurante. vamos a ver cómo funcionan estos. 

¿Cómo funciona la Destrucción Diferente de Tuple?

Tenemos una forma de desestructuración de tuplas que es la siguiente:

let Student_roll = [ 1001, 1002, 1003 ];
let [stud1, stud2, stud3 ] = Student_roll;

El código anterior es equivalente al siguiente código:

var stud1=1001, stud2=1002, stud3=1003;

Podemos escribir la Destrucción de la tupla del nombre de los estudiantes para la variable como identificación del estudiante con el enfoque ilustrado anteriormente. Esta desestructuración en realidad ayuda a asignar el valor de la tupla con índice 0 a stud1 y así sucesivamente. Al final, es lo mismo que el código anterior, que consiste en asignar manualmente el valor a la variable. 

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let [stud1, stud2, stud3 ] = Student;
 
console.log(stud1);
console.log(stud2);
console.log(stud3);

Producción:

Aman
Arun
Bimal

En este punto no tenemos ningún problema, pero ¿y si desestructuramos un elemento a la vez con este enfoque?. Ahora veremos cómo funciona ignorar el elemento:

Tenemos una forma de ignorar el valor medio al desestructurar Tuple. Vamos a ver cómo funciona.

let Student = [ "Aman", "Arun", "Bimal" ];
let [,,stud3 ] = Student;

Aquí “,” se usa para ignorar el valor en la tupla. Este código es equivalente al siguiente código:

let stud3 = "Bimal";

En este código estamos usando «,» que se usa para ignorar la variable. Entonces, si queremos omitir el primer elemento de la tupla, podemos escribir el código de la siguiente manera: 

// TypeScript Code
 
let Student = [ "Aman", "Arun", "Bimal" ];
let [, stud1, stud2 ] = Student;
 
console.log(stud1);
console.log(stud2);

Salida: Y ahora, si imprimimos la variable stud1 y stud2, imprimirá el seguimiento.

Arun
Bimal

También tenemos un operador de dispersión en la tupla de desestructuración en TypeScript, veamos cómo funciona. 

let Student_roll = [ 1001, 1002, 1003 ];
let [...stud3 ] = Student_roll;

Aquí … stud3 define el corte de la tupla y si usamos el operador de propagación con 0 variable indexada al desestructurarlo, corte desde el 0 hasta el final de la tupla y asigne a la variable. que es equivalente al siguiente código:

let stud3 = Student_roll.slice(0);

Podemos usar este operador para separar el primer elemento y todos los elementos restantes y almacenarlos en diferentes variables. Aquí se dividirá con 1 valor de índice.

let Student = [ "Aman", "Arun", "Bimal" ];
let [stud1, ...remaining_class ] = Student;
 
console.log(stud1);
console.log(remaining_class);

Producción:

Aman
["Arun", "Bimal"];

Ejemplo: en este ejemplo, crearemos una tupla con la sintaxis real de TypeScript (incluidos los tipos de datos donde sea necesario) y luego realizaremos la desestructuración de la tupla.

let fruits : string[] = ["Apple", "Banana", "Mango"];
let [fruit_1, fruit_2, fruit_3]: string[] = fruits;
 
console.log(fruit_1 + " - " + fruit_2 +  " - " +  fruit_3);
 
//This code is contributed by Aman Singla...

Producción:

Apple - Banana - Mango

Referencia: https://www.typescriptlang.org/docs/handbook/variable-declarations.html#tuple-destructuring