Tipos de datos y variables en TypeScript

Última actualización: 01 - 11 - 2023

Para comenzar con cualquier lenguaje de programación es importante entender qué es una variable. Estas no son más que un contenedor de datos o información y en el caso de TypeScript estos datos deben ser especificados. ¿Cómo es eso? 🤔 Si ya tienes experiencia con algún otro lenguaje sabrás a qué me refiero pero si no es el caso, las variables son capaces de almacenar valores numéricos, cadenas de texto (strings), valores binarios o booleanos (true y false) y otros tipos de datos más complejos que mostraré más adelante.

En caso de que esta explicación no te haya sido del todo clara aquí tienes otra definición de variables que te puede ayudar.

Tipado de datos en TypeScript

TypeScript es un lenguaje de programación de tipado fuerte o de tipado estático. ¿Qué quiere decir esto? 👀 Las variables van a aceptar solo un tipo de dato a no ser que se le indique que acepte varios tipos de datos; esta tipificación también puede ser aplicada a parámetros de una función, propiedades de clases y más.

Entre los tipos de datos en TypeScript podemos encontrar:

Teniendo esta información definida pasemos al siguiente punto.

¿Cómo se declara una variable en TypeScript?

TypeScript es un lenguaje que tiene bases de JavaScript y la forma de declarar una variable es bastante similar. Veamos un ejemplo:

// Como pseudo código

let nombreDeLaVariable:tipoDeDato = "Valor o información de la variable";

// Declarando una variable y asignandole un valor

let userId:number= 001;

La mayor diferencia está en que ahora se especifica qué tipo de dato va a contener esa variable de forma explicita ¡AUNQUE! TypeScript tiene la capacidad de declarar variables de forma inferida.

Declaración de variables de forma explícita e inferida en TypeScript

Declarar explícitamente una variable es como está en el ejemplo anterior, de esta forma nos aseguramos de que ese es el tipo de dato que vamos a usar durante el ciclo de vida del programa.

La manera de declarar de forma inferida es sin determinar el tipo de dato que queremos usar. Veamoslo en código.

// Forma explicita

let songName:string = "Raining Blood";

// Forma inferida

let songName = "Raining Blood"; // Como en JS

🙋‍♂️ Si puedo declarar variables de forma inferida, ¿cuál es la diferencia con JavaScript en esta forma de declarar variables?

TypeScript tiene la capacidad de reconocer el tipo de dato a pesar de que no fue declarado explícitamente. La mutabilidad no es aplicada al 100% en caso de querer reasignar un valor a una variable; si la variable songName sufriera algún cambio en su valor este tiene que ser un string y no otro tipo de dato.

let songName = "Raining Blood";

// Reasignando el valor de la variable

songName = "Suckerpunch";// Reasignación sin errores

// Reasignando otro tipo de dato

songName = 02;// Error por el tipo de dato

🙍‍♂️🙎‍♀️🙋‍♂️🙍‍♀️ ¿Y cómo podemos hacer para que una variable acepte cualquier tipo de dato?

Usas JavaScript.

En este punto es donde podemos usar el tipo de dato any.

let unDatoRandom:any = "Un dato como string";

let segundoDatoRandom:any = true;

let tercerDatoRandom:any = !1;

Múltiples tipos de datos en una variable de TypeScript. Unión de tipos de datos

TypeScript tiene la capacidad de decidir qué tipo de dato recibir en una variable sin la necesidad de usar any, limitando el tipo de información que se va a almacenar. Para ello usa el símbolo de pipes ( | ) para determinar la exclusividad de dichos datos.

let userId:string|number;

Usamos el ejemplo de userId de nuevo ya que es perfecto para determinar un caso hipotético en donde se requiera utilizar la información del usuario, ya sea su nombre (string) o un número de identificación (number) e incluso si el input de la información de su número de identificación está configurada como un string. La variable va a aceptar solo esos tipos de datos.

Creando datos personalizados en TypeScript. Alias de tipos

Este lenguaje de programación sigue presentando más versatilidad a la hora de crear variables. TypeScript tiene la potestad de nombrar el tipo de dato, es decir, podemos reemplazar los nombres any, booleans o numbers por el que mejor se ajuste al flujo del programa... O por el que nos guste.😆(Siempre y cuando tenga coherencia).

//Creando el dato personalizado

type ID = number|string;

//Ahora podemos usar el tipo ID para crear variables explícitas

let userId:ID;
userID = 001;//number
userID = "001";//string

//La variable userId acepta ambos valores

Se utiliza la palabra reservada type y luego se coloca el nombre para el tipo de dato que necesites utilizar, seguido de ello se declaran los tipos de datos primitivos para el dato personalizado.

Diferencias entre let y var

TypeScript sigue las mismas reglas de JavaScript para crear variables (scope). A modo de repaso, la palabra reservada let usa un ámbito de bloque mientras que var usa un ámbito o alcance global.

var jedi:boolean= true;
var name:string = "Anakin Skywalker";

if( jedi ){
  let jedi = false;
  let name = "Darth Vader";
  console.log(jedi, name);//false, Darth Vader
}

console.log(jedi, name);//true, Anakin Skywalker

A pesar de que las variables jedi y name están presentes dentro y fuera dentro del bloque condicional, por la forma en la que se declaran las variables (let y var) los datos no son reasignados. Si dentro del if se hubiese usado var para declarar las variables los valores de estas se sobre escriben y ambos mensajes por consola imprimiría los valores false, Darth Vader.

Volver