Exprime el tipado en TypeScript

Una de las características principales de TypeScript, y sin lugar a dudas el mayor aporte de TypeScript es el tipado. Es decir, indicar la naturaleza de cada variable. Si una variable contendrá un número, o una cadena de texto, o otros tipos de datos. Esto aporta robustez al código que estamos escribiendo. Una variable de un tipo concreto no puede ser utilizada para otro tipo. Así, en este capítulo, vamos a ver algunos de los tipos de datos que hay en TypeScript, y como utilizarlos, y en futuros capítulos, veremos como es posible inferir un tipo de dato e incluso como podemos convertir entre distintos tipos de datos. Vamos a por los tipos en TypeScript.

Exprime el tipado en TypeScript

En este capítulo vamos a ver una decena de tipos de datos en TypeScript, y como se definen. Así, como las características de cada uno de ellos.

Una de las ventajas de declarar el tipo de una variable, es que en la mayoría de editores, nos permite conocer los distintos métodos que podemos utilizar sobre esa variable.

Así, en este capítulo trataremos los siguientes tipos,

number
string
boolean
array
tuple
enum
union
any
void
never

`number`

Como te puedes imaginar este tipo se utiliza para declarar una variable que contenta números. Indicar que todos los números se guardan como números de coma flotante, es decir, números reales. Además, estos números pueden ser en base decimal, hexadecimal, octal o binarios, como en el ejemplo siguiente,

const numero_d: number = 10;
const numero_h: number = 0x12AF;
const numero_o: number = 0o123;
const numero_b: number = 0b101010;

console.log(numero_d);
console.log(numero_h);
console.log(numero_o);
console.log(numero_b);

Si ejecutas el código anterior, verás que el resultado es siempre decimal. Tal y como comentaba anteriormente, se guarda y se representa como un número real.

Este tipo de datos tiene una serie de métodos asociados. Algunos de estos métodos son,

toString que devuelve la representación como cadena de texto de la variable.
toFixed devuelve una cadena con el número de decimales que le digamos.

`string`

Este tipo de dato es el que te permitirá almacenar cadenas de texto. Puedes utilizar tanto comillas simples como comillas dobles para definir el valor. Mientras que si utilizas esas comillas inclinadas, puedes convertir una variable en su contenido.

const nombre: string = "Pepe";
const apellido: string = "Pótamo";
const completo: string = `${nombre} ${apellido}`;

console.log(completo);

Algunos métodos interesantes que puedes utilizar con este tipo de datos son,

charAt devuelve el carácter en una posición dada
indexOf devuelve la posición del texto que le indiques en otro texto ó -1, si no lo encuentra
toUpperCase devuelve el texto convertido a mayúsculas
toLowerCase devuelve el texto convertido a minúsculas
includes verifica si contiene una cadena de texto
endsWith comprueba si una cadena de texto termina con un valor
match comprueba una expresión regular
trim devuelve la cadena sin espacios al inicio y al final

Estos son algunos de los métodos del tipo string. Hay bastantes mas, pero, con estos, ya te puedes hacer una idea del potencial de este tipo de datos.

console.log(nombre.toUpperCase());

`boolean`

Ahora toca uno sencillo. Un tipo de datos que simplemente toma dos posibles valores true o false.

`array`

Este tipo de datos tiene la particularidad que te permite almacenar varios valores de un tipo de definido, por ejemplo, te permite guardar varias números o cadenas de texto, u otros que veremos mas adelante. Eso si, todos los valores almacenados en un array tienen que ser del mismo tipo.

Así, por ejemplo para definir un array de cadenas de texto lo puedes hacer de la siguiente forma,

const frutas: string[] = ["naranja", "pera", "plátano"];

Para obtener un elemento del array, lo puedes hacer de la siguiente forma,

console.log(frutas[0])

Esto para obtener el primero. Si indicas un índice que está por encima del número de elementos que contiene tu array, te devolverá undefined.

Otra cuestión interesante, es que si bien, has definido frutas como const, lo cierto es que puedes modificar su contenido,

frutas[0] = "melón";
console.log(frutas);

Algunos métodos interesantes de los tipos de dato array, son los siguientes,

pop quita el último elemento del array y devuelve el elemento
shift quita el primer elemento del array y devuelve el elemento
push añade un elemento al array y devuelve la longitud del array
sort ordena el contenido del array. Es decir, modifica el orden del array.
indexOf devuelve la posición de un elemento del array o -1 en caso de que no lo contenga.
join une todos los elementos del array y devuelve una cadena de texto.
concat une dos array y devuelve el resultado

`tuple`

Este tipo de dato no existe en JavaScript. Una tuple contiene dos valores de tipos diferentes, aunque podrían ser del mismo tipo. Por ejemplo,

const usuarios: [number, string] = [1, "Pepe"];
console.log(usuarios);

Si queremos añadir un nuevo usuario, a nuestra lista de usuario, utilizaremos el método push, al igual que haces con los array,

usuario.push(2, "Potamo");
console.log(usuario);

`enum`

Los datos tipo enum son un conjunto de valores constantes. Por ejemplo, para definir dispositivos, puedes hacerlo de la siguiente forma,

enum Dispositivo {
    Pantalla,
    Reloj,
    Movil
}

Existen distintos tipos de enum, como son los de tipo number, los de tipo string y los heterogéneos. Por defecto, un enum es de tipo number, y salvo que asignes un valor a cada elemento, este se asigna de forma secuencial. Así en el ejemplo anterior,

console.log(Dispositivo.Pantalla); // => 0
console.log(Dispositivo.Movil);    // => 2

Si bien, no es necesario que tengan un valor secuencial, sino que pueden tener cualquier tipo de valor.

enum Dispositivo2 {
    Pantalla = 2,
    Reloj = 5,
    Movil = 15,
}
console.log(Dispositivo2.Pantalla); // => 2
console.log(Dispositivo2.Movil);    // => 15

Y de la misma manera, tal y como indiqué antes, también pueden ser cadenas de texto,

enum Dispositivo3 {
    Pantalla = "PANTALLA",
    Reloj = "RELOJ",
    Movil = "MOVIL",
}
console.log(Dispositivo3.Pantalla); // => PANTALLA
console.log(Dispositivo3.Movil);    // => MOVIL

Tienes que tener en cuenta la ventaja que te ofrecen los tipos de datos enum numéricos frente al resto. Y es que este tipo de datos, te permiten realizar un mapeo inverso. Por ejemplo, en el caso de Dispositivo2,

console.log(Dispositivo2.Pantalla) // => 2
console.log(Dispositivo2[2])       // => Pantalla

`union`

El tipo de dato union te permite declarar una variable de dos o mas tipos. Por ejemplo, puedes declarar que una determinada variable es del tipo string y a su vez del tipo number. Un ejemplo,

let item: (string | number);
item = 10;
console.log(item); // => 10 (un number)
item = "20";
console.log(item); // => 20 (un string)

Atención, que en el ejemplo anterior, el primero es un number, mientras que el segundo es un string. Es decir, que el primero lo trataras como un number y puedes utilizar los métodos de un number, mientras que en el segundo utilizarás los métodos de un string.

`any`

Pero, ¿que sucede si no sabes con certeza el tipo de datos que contendrá una variable? En ese caso puedes utilizar el tipo any, que básicamente es un tipo de datos que te permite contenido dinámico.

let item: any;
item = 10;
console.log(item); // => 10 (un number)
item = "20";
console.log(item); // => 20 (un string)

Incluso, puedes declarar un array de tipo any, que como ya te imaginas, puede contener cualquier tipo de dato,

const valores: any[] = [1, "dos", 3, "cuatro"];
console.log(valores);

`void`

void se utiliza para indicar que no devuelve nada. Desde luego, que no tiene ningún sentido asignar el tipo void a una variable. Pero, si defines una variable del tipo void solo le podrás asignar el valor undefined o null, en cualquier otro caso te arrojará un error.

En general el tipo void se recomienda utilizarlo como un valor de retorno o como un argumento genérico.

`never`

El tipo never indica que nunca ocurrirá. Este tipo de dato se puede utilizar como retorno de una función, cuando sabemos que esa función no llegará a terminar nunca, por ejemplo, cuando se lanza un error, o cuando entra en un bucle infinito.

function nada(ejemplo: string): never {
    throw new Error(ejemplo);
}

El vídeo

Lo mismo que te he contado hasta aquí pero en formato vídeo,

Más información,

TutorialsTeacher

atareao con Linux

Exprime el tipado en TypeScript