En este artículo vamos a hacer una introducción a los Tipos en TypeScript para desarrolladores de JavaScript. Veremos qué es un tipo, cuáles existen y cómo declararlos en TypeScript.

¿Qué es un tipo?

Un tipo de datos es una clasificación que especifica los posibles valores que puede tener una variable. Por ejemplo, si una variable tiene un tipo numérico indica que los valores son números o si una tiene el tipo cadena indicaría que los valores son secuencias de caracteres. Pero además, los tipos de datos también incluyen las operaciones válidas que se pueden realizar sobre esas variables de un tipo en particular, así como la forma en que se almacena en memoria y se interpreta el código durante la ejecución del programa.

Lo anterior sería una definición bastante formal aunque, si vienes de JavaScript, quizás las cosas no te encajen tanto, ya que puedes declarar variables sin indicar de qué tipo son. Esta es una característica clave del lenguaje, que se dice que es "débilmente tipado" o de "tipado dinámico".

En cualquier caso quizás sepas que, aunque tú no indiques el tipo, el propio lenguaje sí se lo asigna a cada variable según aquello que hayas asignado dentro.

Cómo son los tipos en TypeScript

El hecho de que no definamos los tipos en Javascript cuando introducimos datos en una variable, incluso que la variable pueda cambiar su tipo a lo largo de la ejecución del programa, da flexibilidad, pero también abre la puerta a errores difíciles de detectar. Es por ello que TypeScript se posiciona como una extensión al lenguaje Javascript que añade la posibilidad de tipar tus variables. con ello puede ayudarte a escribir código más seguro y fácil de mantener, añadiendo tipos al lenguaje que ya conoces.

Un tipo define qué clase de datos puede tener una variable. Se indican los tipos en el momento de declarar las variables, con ":" y seguido del tipo que van a tener. Por ejemplo:

let edad: number = 30;
let nombre: string = "Juan";
let activo: boolean = true;

Esto le dice a TypeScript que:

• edad solo puede contener números,
• nombre solo puede contener texto (strings),
• activo solo puede tener valores true o false.

Si más adelante intentas hacer alguna operación que altere el tipo TypeScript te avisará con un error en el momento de compilar el código, incluso en el editor te podrá alertar en el momento en el que escribes tu código!

Por tanto, hacer esto sería alertado por el editor:

let edad: number = 30;
edad = "treinta";

Por supuesto, al compilarse el código te avisarían con un error.

Tipos básicos en TypeScript

En TypeScript tienes un sistema de tipos robustos, que puedes extender creando tus propias clases. Aquí tienes los tipos más comunes soportados por el lenguaje:

number

Descripción: Representa cualquier número. Puede ser tanto entero como decimal. No hay distinción entre int y float como en otros lenguajes: todo es number.

Ejemplo:

let edad: number = 30;
let precio: number = 12.99;

string

Descripción: Cadenas de texto. Igual que en Javascript, puedes usar comillas simples ('), dobles (") o backticks (` `) para plantillas.

Ejemplo:

let nombre: string = "Lucía";
let mensaje: string = `Hola, ${nombre}`;

boolean

Descripción: Solo puede tomar dos valores: true o false. Ya sabes, los típicos boleanos que usamos en estados, condiciones y flags.

Ejemplo:

let activo: boolean = true;
let tienePermiso: boolean = false;

any

Descripción: Desactiva el sistema de tipos. Una variable con tipo any puede contener cualquier cosa. Es útil para migraciones desde JavaScript o casos muy dinámicos, pero se recomienda evitarlo en código TypeScript moderno.

Ejemplo:

let dato: any = 5;
dato = "ahora es un texto";
dato = { clave: "valor" };

Decirle a TypeScript que un tipo es any significa no aprovechar las posibilidades de TypeScript y volver a las desventajas del sistema de tipos de Javascript como la posibilidad que el editor te ayude con el autocompletado, como que te alerte de problemas de tipos, etc. Si tenemos en cuenta la complejidad extra que requiere el uso de TypeScript, queda patente que, si usas muchos any es casi mejor trabajar en Javascript y listo, y que no ganas nada a cambio de introducir TypeScript.

undefined / null

Descripción: Representan la ausencia de valor. undefined indica que una variable no ha sido inicializada, y null representa un valor intencionalmente vacío. Aunque se pueden usar como tipos explícitos, en la práctica suelen ser parte de uniones (string | null, por ejemplo).

Ejemplo:

let sinDefinir: undefined = undefined;
let vacio: null = null;

Arrays y Objetos

Por supuesto, también tipar también estructuras más complejas, como los arrays:

let numeros: number[] = [1, 2, 3];

Incluso podrías definir tipos que son objetos con determinadas propiedades que tienen a su vez tipos.

let persona: { nombre: string; edad: number } = {
  nombre: "Lucía",
  edad: 28
};

También puedes usar type o interface para definir estructuras, lo que te vendrá muy bien si necesitas que estos tipos sean reutilizables:

type Persona = {
  nombre: string;
  edad: number;
};

let p1: Persona = { nombre: "Carlos", edad: 40 };

Definit tipos de retorno de funciones

Puedes decirle a TypeScript qué tipos reciben y devuelven tus funciones:

function saludar(nombre: string): string {
  return "Hola, " + nombre;
}

Esto te protege, por ejemplo, si accidentalmente llamas a saludar(123) en lugar de pasarle un texto.

Inferencia de tipos

Algo también muy importante que debes saber de los tipos en TypeScript es que no siempre necesitas declararlos. De hecho, la mayoría de las veces el tipo se puede deducir según aquello que hemos asignado, por lo que TypeScript no nos obliga a declararlo explícitamente:

let mensaje = "Hola"; // TypeScript infiere que es un string
mensaje = 5; // Error: no puedes asignar un número a un string

Esto significa que puedes usar TypeScript de forma gradual, sin tener que tiparlo todo de golpe y el sistema de tipos te ayudará igualmente.

¿Por qué molestarse con los tipos?

Usar tipos puede parecer más trabajo al principio, pero te da muchas ventajas:

• Encuentras errores antes de ejecutar el código.
• Los editores de código pueden ayudarte mejor (autocompletado, refactorizaciones seguras).
• Tu código es más fácil de entender para otros... y para ti dentro de unos meses.

Conclusión

TypeScript nos ofrece utilidades encima de JavaScript. Lo más elemental es lo que hemos visto, sus tipos básicos. No es más que un primer paso para aprovechar sus ventajas.

Lo bueno es que cualquier código Javascript es código válido TypeScript, por lo que puedes empezar poco a poco, y cada tipo que añadas hará tu código más robusto.