Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Tipado variables TypeScript

Tipado de variables en TypeScript

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

Más tutoriales de Angular

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
A %d blogueros les gusta esto: