Tipado de variables en TypeScript
En el siguiente tutorial vamos a aprender qué tipos básicos existen en TypeScript para cada tipo de variable. Tipado de variables en TypeScript
Tipado estricto
La principal función del tipado en el lenguaje TypeScript es la de facilitar al desarrollador la comprobación de posibles errores durante el proceso de creación de una aplicación.
Una vez que el código se compila en JavaScript, el tipado desaparece y no hay ninguna diferencia en tiempos de ejecución con otra aplicación escrita en JavaScript.
A partir de la versión 14 de Angular, el indicador «strict» de TypeScript viene activado por defecto. Esto activa la comprobación automática y el indicador «strictNullChecks«.
Indicador strictNullChecks
Al activar strictNullChecks se habilita una comprobación automática que genera errores cuando algúna variable recibe el valor de null o undefined cuando no es su tipo definido.
Para deshabilitarlo podemos hacerlo editando el archivo tsconfig.json añadiendo «strictNullChecks»: false en «compilerOptions»
Tipos de datos en TypeScript
Además de los tipos de datos nativos de JavaScript se incluyes algunos más específicos de TypeScript y a continuación vamos a explicar cada uno de ellos.
Tipo Null
Para declarar una variable con tipo null lo haremos de la siguiente forma. Hay que tener en cuenta que mientras no se le asigne el valor, la variable tendrá valor undefined.
let variable: null; // El valor de variable es undefined aunque tenga el tipo null
Una variable declarada con el tipo de dato null no puede tener ningún otro valor ni contener ningún otro tipo que no sea null o undefined.
Para asignarle valor lo haremos de la siguente forma
// Declaramos la variable let variable: null; // El valor de variable es undefined // Asignamos el valor null a variable variable = null; // El valor de variable es null // Podemos hacerlo todo en la misma línea let variable: null = null;
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: null = null; // No causa error let prueba2: undefined = null; // Causa un error let prueba3: number = null; // Causa un error let prueba4: void = null; // Causa un error // strictNullChecks desactivado let prueba1: null = null; // No causa error let prueba2: undefined = null; // No causa error let prueba3: number = null; // No causa error let prueba4: void = null; // No causa error
Tipo void
El tipo de dato void se utiliza para indicar que la variable no tiene un tipo definido.
let variable: void;
Una variable de tipo void sólo se le puede asignar el valor undefined
let variable: void = undefined; // El valor de variable es undefined variable = null // Causa un error variable = 1; // Causa un error
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: void = undefined; // No causa error let prueba2: void = null; // Causa un error let prueba3: void = 1; // Causa un error let prueba4: void = "manzana"; // Causa un error // strictNullChecks desactivado let prueba1: void = undefined; // No causa error let prueba2: void = null; // No causa error let prueba3: void = 1; // Causa un error let prueba4: void = "manzana"; // Causa un error
Tipo undefined
El tipo de dato undefined se utiliza para variables cuyo valor no se ha especificado.
Si strictNullChecks está activado, la variable sólo puede tener el valor undefined, en cambio, si está desactivado, la variable podrá recibir valor de otros tipos.
Declaración de una variable de tipo undefined
let variable: undefined = undefined;
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: undefined = undefined; // No causa error let prueba2: undefined = null; // Causa un error let prueba3: number = undefined; // Causa un error let prueba4: void = undefined; // No causa error // strictNullChecks desactivado let prueba1: undefined = undefined; // No causa error let prueba2: undefined = null; // No causa error let prueba3: number = undefined; // No causa error let prueba4: void = undefined; // No causa error
Tipo Any
Las variables con tipo de dato any se utilizan cuando no sabemos que tipo va a tener una variable, bien porque depende de lo que determinen los usuarios o una librería. También es útil cuando definimos arrays que contienen variables de distinto tipo.
Declaración de una variable de tipo any
let variable: any; // Podemos darle como valor un string let variable: any = "manzana"; // Al se de tipo any podemos cargarle otro tipo de dato variable = 1; variable = true;
Tipo Never
El tipo never se utiliza cuando sabemos que esa variable nunca va a recibir un valor.
let prueba1: never; // No podemos asignarle valor let prueba2: never = false; // Causa un error let prueba3: never = null; // Causa un error let prueba4: never = "monday"; // Causa un error
Podemos asignar el tipo never al tipo de devolución de una función que sabemos que no va a devolver nada a menos que suceda un error.
function mostrarAlerta(): never {
alert("Atención");
}
Cadenas de texto
El tipo de dato string puede contener cadenas de texto y valores literales.
Declaración de una variable de tipo string
let nombre: string = "Jose Luís";
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: string = undefined; // Causa un error let prueba1: string = null; // Causa un error let prueba2: string = "Alberto"; // No causa error let prueba3: string = 5; // Causa un error // strictNullChecks desactivado let prueba1: string = undefined; // No causa error let prueba1: string = null; // No causa error let prueba2: string = "Alberto"; // No causa error let prueba3: string = 5; // Causa un error
Números
El tipo de dato numérico en TypeScript puede contener tanto números enteros como decimales, e incluso pueden contener valores hexadecimales, binarios y octales.
Además de los anteriores, el tipo numérico también puede contener valores simbólicos especiales como NaA, +Infinity o -Infinity.
Declaración de una variable de tipo numérica. Es importante recordar que no podrá contener ni el valor null ni undefined si tenemos activado strictNullChecks.
let edad: number = 45;
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: number = undefined; // Causa un error let prueba2: number = null; // Causa un error let prueba3: number = 25; // No causa error let prueba4: number = "manzana"; // Causa un error // strictNullChecks desactivado let prueba1: number = undefined; // No causa error let prueba2: number = null; // No causa error let prueba3: number = 25; // No causa error let prueba4: number = "manzana"; // Causa un error
Booleanos
El tipo booleano solo puede tener dos valores válidos true o false. Si se le da otro valor produce un error
let verdadero: Boolean = false; verdadero = true; // No causa error verdadero = "true"; // Causa un error verdadero = 5; // Causa un error
Arrays
Las variables de tipo array se pueden declarar en TypeScript de dos formas
- Especificando el tipo de los elementos seguido de corchetes
// Array de enteros let arrayEnteros: number[] = [1,2,3]; // Array de strings let arrayStrings: string[] = ["manzana","pera"];
- Utilizando el tipo genérico Array y especificando el tipo
// Array de enteros let arrayEnteros: Array<number> = [1,2,3]; // Array de strings let arrayStrings: Array<string> = ["manzana","pera"];
Diferencias entre tener strictNullChecks activado o desactivado
// strictNullChecks activado let prueba1: number[] = [1,2,3]; //No causa error let prueba2: string[] = ["manzana", "naranja"]; // No causa error let prueba3: number[] = [1,2,"manzana"]; // Causa un error let prueba4: Array<string> = ["manzana", null, "pera"]; // Causa un error let prueba5: Array<number> = [undefined, null, 1,2]; // Causa un error // strictNullChecks desactivado let prueba1: number[] = [1,2,3]; // No causa error let prueba2: string[] = ["manzana", "naranja"]; // No causa error let prueba3: number[] = [1,2,"manzana"]; // Causa un error let prueba4: Array<string> = ["manzana", null, "pera"]; // No causa error let prueba5: Array<number> = [undefined, null, 1,2]; // No causa error
Tuplas
La tupla es un tipo de array en el cual se conoce el tipo que van a tener los valores. Una vez declarado, los valores deberán tener los tipos definidos.
let prueba1: [number, string] = [5, "manzana"]; // No causa error let prueba2: [number, string] = ["manzana", 5"]; // Causa un error
Una vez declarada la tupla, sólo será estricto el uso del tipo definido en las posiciones indicadas en la declaración, es decir, si añadimos más elementos al array de los que hay declarados, estos podrán tener un tipo diferente.
Ejemplo
// El primer y segundo elemento del array tienen el tipo definido, los demás no se validarán let prueba1: [number, string] = [5, "manzana", "pera", 7]; // No causa error // Los tres primeros elementos del array tienen el tipo definido, los demás no se validarán let prueba2: [string, string, number] = ["manzana", "pera", 7, "limón", "naranja", 25]; // No causa error
Enum
A diferencia de JavaScript, TypeScript si que permite utilizar variables de tipo enum.
Las variables de tipo enum permiten declar una colección de valores con sus nombres
// Declaramos la variable de tipo enum
enum Frutas {manzana, naranja, pera};
// Declaramos otra variable de tipo Frutas y se inicializa con la posición de manzana
let posManzana: Frutas = Frutas.manzana;
// posManzana vale 0
// Ahora le damos el valor de la posicón de pera
posManzana = Frutas.pera;
// posManzana vale 2
// Declaramos una variable string y le asignamos el valor de la posición 1
let fruta: string = Frutas[1];
// fruta vale naranja
Al igual que en los arrays, la primera posición de una variable de tipo enum siempre es cero, pero podemos definir la posición de cada elemento indicándolo de esta forma
enum Frutas {manzana = 1, pera, naranja = 6, limon}
let posFruta: Frutas = Frutas.manzana;
// posFruta vale 1
let posFruta2: Frutas = Frutas.pera;
// posFruta2 vale 2
let posFruta3: Frutas = Frutas.limon;
// posFruta3 vale 7
let fruta4: string = Frutas[1];
// fruta4 vale manzana
let fruta5: string = Frutas[0];
// fruta5 vale undefined