TypeScript / Tuples

Bienvenidos sean a este post, hoy hablaremos sobre un tipo particular de datos.

Los tuples son un tipo de definicion de tipos con un numero finito de propiedades sin nombre, con cada propiedad teniendo un tipo asociado. Una particularidad de los tuples es que al ser usados todas las propiedades deben ser provistas. Analicemos el siguiente codigo:

let tuple: [ string, boolean ];
tuple = [ "prueba", true ];
tuple = [ "tinchicus" ];

Lo primero que haremos sera declarar un tuple con dos tipos de datos, lo siguiente sera establecer los dos valores para los tipos asignados en la declaracion y en el siguiente caso repetimos lo mismo pero pasamos un solo valor, compilemos y veamos su salida:

$ tsc tuple.ts
tuple.ts:3:1 - error TS2322: Type '[string]' is not assignable to type '[string, boolean]'.
  Source has 1 element(s) but target requires 2.

3 tuple = [ "tinchicus" ];
  ~~~~~


Found 1 error in tuple.ts:3

$

Observen el detalle mas importante, nos informa que pasamos un solo elemento y se requieren dos. Es lo que dijimos anteriorrmente para poder usarlo se deben asignar todos los tipos declarados en el tuple.

Los tuples al usar una sintaxis como la de los arrays nos permite realizar una destructuracion de los tuples en dos maneras. Tomemos el codigo anterior y modifiquemoslo de la siguiente manera:

let tuple: [ string, boolean ];
tuple = [ "prueba", true ];

for(let i=0; i < tuple.length; i++)
{
        console.log("tuple[" + i + "]: " + tuple[i]);
}

Mantenemos el tuple con los mismos tipos, y definimos un solo tuple con ambos datos. Lo siguiente sera un bucle donde pasaremos por todos los elementos del tuple y lo mostraremos en pantalla. Con esto comentado veamos como es su salida:

$ node tuple.js
tuple[0]: prueba
tuple[1]: true
$

Como pueden ver pudimos recuperar la informacion con el mismo estilo que un array pero como comentamos anteriormente existe otra manera, tomemos el codigo anterior y hagamos los siguientes cambios:

let tuple: [ string, boolean ];
tuple = [ "prueba", true ];
let [tupleCdn, tupleBln] = tuple;
console.log("tupleCdn = " + tupleCdn);
console.log("tupleBln = " + tupleBln);

Seguimos con la misma declaracion del tuple asi como la misma definicion pero lo nuevo viene en la siguiente linea. En esta usaremos un tuple con dos variables dentro y a estos le asignaremos los valores contenidos en tuple para luego mostrar los valores en las dos ultimas variables. Veamos como es su salida:

$ node tuple.js
tupleCdn = prueba
tupleBln = true
$

Como pueden ver ahora poseemos dos formas de desestructurar los tuples pero una puede ser mas practica que otra dependiendo del codigo donde estemos trabajando. Como siempre digo va a quedar al criterio de cada uno.

Al inicio indicamos que al momento de asignar los datos debemos respetar los tipos que declaramos en nuestro tuple pero esta es una verdad a medias porque disponemos de un operador que nos permite establecer un valor como opcional. Veamos el siguiente codigo:

let tuple: [ string, boolean? ];
tuple = [ "prueba", true ];
tuple = [ "tinchicus" ];

Recuerdan este ejemplo? es el ejemplo que vimos al comienzo y que nos devolvia un error pero ahora no lo hara porque si observan le agregamos un signo de interrogacion al segundo tipo y esto ocasionara que lo transformara en opcional. Por lo tanto, si lo compilamos ahora este codigo funcionara porque al convertirlo en opcional ya no es obligatorio. En este caso si hicieramos que nos muestre los valores nos devolveria que posee el valor tinchicus pero el segundo sera undefined.

Otra posibilidad que tenemos es la propagacion de datos como vimos anteriormente en este post. Veamos el siguiente ejemplo:

let tuple: [ number, ...string[] ];
tuple = [ 1 ];
tuple = [ 1, "texto" ];
tuple = [ 1, "texto", "otro" ];

for(let i=0; i < tuple.length; i++)
{
        console.log(tuple[i]);
}

Primero declaramos nuestro tuple y aqui establecemos un valor de tipo number y luego el operador de propagacion seguido por un valor variable de string, lo cual nos permitira almacenar mas de un valor de este tipo. Despues paulatinamente iremos agregando nuevos valores al tuple. Para finalmente usar un bucle donde mostraremos todos los valores almacenados en el tuple. Veamos como es su salida:

$ node tuple.js
1
texto
otro
$

Como pueden ver trabajo de la forma que pretendiamos, pero con la curiosidad de que podemos establecer multiples entradas con el mismo tipo.

Otra cosa interesante es que podemos aplicar la desestructuracion de tuples en objetos, y es muy similar a lo que hablamos anteriormente. Veamos el siguiente ejemplo:

let objeto = {
        num: 1,
        str: "tinchicus",
        bool: true
}
let { num, str, bool } = objeto;
console.log(num);
console.log(str);
console.log(bool);

Primero definimos un objeto con tres propiedades de distintos tipos. Lo siguiente sera establecer estos datos en tres variables para luego mostrarlos. Veamos como es su salida:

$ node tuple.ts
1
tinchicus
true
$

Aca podemos recuperar cada uno de los valores de las propiedades del objeto. Pero como vimos anteriormente tambien podemos asignar las propiedades a otros nombres. Tomemos el codigo anterior y hagamos la siguiente modificacion:

let objeto = {
        num: 1,
        str: "tinchicus",
        bool: true
}
let { num: id, str: nombre, bool: logged } = objeto;
console.log(id);
console.log(nombre);
console.log(logged);

En este caso tenemos un codigo muy similar pero ahora a la hora de asignarlos en lugar de usar los nombres originales le asignaremos otro nombre para identificar mejor que dato representan y para ello simplemente los establecemos como propiedades y el valor representara a las nuevas variables. Lo siguiente sera usar estas nuevas variables para mostrar los mismos valores y debemos obtener la misma salida que teniamos anteriormente.

En realidad, hoy hemos visto a tuple, que es, para que sirve, como se componen, sus distintas variaciones para trabajar, como conductas y otras particularidades que no solo se aplican a los tuples. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.