TypeScript nos permite usar muchos tipos de variables diferentes. Todos los que usamos en JavaScript, por supuesto, pero también añade alguno más. Incluso podemos crear nuestros propios tipos. Pero antes de ver nuevos tipos, vamos a ver cómo vamos a usar los tipos que ya conocemos de JavaScript.
Antes de continuar, quizás quieras ver una introducción teórica de TypeScript.
A diferencia de JavaScript, que es un lenguaje que usa tipado dinámico, TypeScript usa un tipado estático. Esto significa que en JavaScript podemos tener una variable que en un momento dado cambie a un tipo diferente y eso se resuelve en tiempo de ejecución, mientras que en TypeScript los tipos de las variables se establecen durante la fase de desarrollo y no cambiarán durante el tiempo de ejecución.
Tipos principales: números, texto y booleanos
Las cadenas de texto, números y booleanos son los tipos más habituales. Cuando declaremos variables deberemos hacer algo así como:
const cadenaDeTexto: string = "Hola mundo" const unNumeroCualquiera: number = 20 const ciertoFalso: boolean = true
Aunque no esté mal indicar el tipo de variable cuando las estamos definiendo, esto no es necesario. TypeScript tiene una funcionalidad llamada inferencia de tipos, que le permite inferir o determinar el tipo de variable que será según el valor que le asignemos, por lo que este código sería también totalmente válido:
const cadenaDeTexto = "Hola mundo" const unNumeroCualquiera = 20 const ciertoFalso = true
No solo es válido, sino que se considera una buena práctica aprovecharse de la inferencia de tipos. Como veremos en otro post, donde sí especificaremos los tipos es en las funciones, para limitar las entradas y las salidas de datos que se permiten, pero ya llegaremos a eso.
Hay un caso concreto donde sí es una buena idea indicar el tipo de variable: cuando no la inicializamos inmediatamente:
let unNumero: number let unTexto: string let unBooleano: boolean
En este caso concreto es importante definir el tipo para que cuando asignemos valores a las variables solo puedan ser del tipo que hemos declarado y nos lance un error si intentamos meter ahí algo diferente.
Objetos
Cuando definimos objetos, en JavaScript podemos acceder a propiedades inexistentes y eso nos devuelve el valor undefined. En TypeScript en cambio, esto nos va a generar un error:
const gato = { nombre: "Misifú", patas: 4, } console.log(gato.edad) // error
Esto sucede porque al definir el tipo de objeto gato, TypeScript infiere un nuevo tipo de dato que consistirá en un objeto con las propiedades nombre y patas del tipo string y number respectivamente. Este nuevo tipo de dato es internamente una interfaz, que veremos cómo se definen en otro artículo específico.
El código anterior sería equivalente a este otro si definiéramos el tipo de variable que estamos declarando:
const gato: { nombre: string patas: number } = { nombre: "Misifú", patas: 4, }
Insisto, aunque sea posible hacer esto último, no es una buena práctica. Es recomendable aprovecharse de la inferencia de tipos.
Arrays
Ya conocemos los arrays, nos permiten almacenar listas de elementos. Con TypeScript podremos definir qué tipos vamos a poder almacenar.
Si queremos declarar un array, la cosa no cambia mucho a lo que hemos visto anteriormente:
const arrayDeTextos: string[] = ["uno", "dos", "tres", "cuatro"] const arrayDeNumeros: number[] = [1, 2, 3, 4] const arrayDeBooleanos: boolean[] = [true, false, true]
Pero por supuesto, si nos aprovechamos de la inferencia de tipos, los declararemos como siempre y TypeScript ya inferirá el tipo:
const arrayDeTextos = ["uno", "dos", "tres", "cuatro"] let arrayDeNumeros: number[] arrayDeNumeros = [1, 2, 3, 4]
También podemos usar esta sintaxis:, ligeramente diferente:
const arrayDeNumeros: Array<number> = [1, 2, 3, 4]
Cuando definimos un array de un tipo determinado, no podremos almacenar en él elementos de otro tipo sin que TypeScript nos lance un error:
let numeros: Array<number> numeros = [1, 2, "tres", 4] // error
Y hasta aquí la primera parte de las bases de TypeScript. Puedes continuar con la siguiente parte si quieres, donde veremos cómo tipar funciones.