TypeScript y tipos primitivos

Estoy empezando a migrar a TypeScript. Empecé a ver cómo funciona y las diferentes formas de usarlo.

TypeScript es un superset que corre sobre JavaScript y soporta todos los tipos primitivos.

Quiero empezar mostrando algunas cosas que aprendí hoy sobre TypeScript.

TypeScript y los tipos

TypeScript permite definir variables, propiedades o parámetros en funciones usando los tipos primitivos.

Un error común es confundir los tipos primitivos con interfaces.

Los tipos primitivos van todos en minúsculas: number, string, boolean, object y array.

Las interfaces de los tipos primitivos empiezan con mayúscula: Number, String, Boolean y Array.

Tipos primitivos de JavaScript

El tipo number se usa para todos los números, sin importar si son enteros, decimales o flotantes.

El tipo string se usa para texto literal, cadenas simples o cualquier valor de texto.

El tipo boolean acepta dos valores: true y false (o 1 y 0).

El tipo object permite guardar una estructura de datos con cualquier información y objetos anidados.

El tipo array permite almacenar una lista de cualquier tipo de datos.

Declaraciones

Por ejemplo, si la variable id es de tipo number, el compilador exige que el valor asignado a id sea un número:

let id = 5
id = "1"

El compilador muestra un error antes de terminar la compilación:

app.ts:3:1 - error TS2322: Type '"1"' is not assignable to type 'number'.
3 id = "1";
  ~~
Found 1 error.

El compilador detecta el error antes de publicar nuestra aplicación.

Tipado estático vs tipado dinámico

JavaScript tiene tipado dinámico, lo que significa que nuestras variables pueden cambiar de tipo en tiempo de ejecución.

TypeScript tiene tipado estático y nos ayuda a evitar errores durante el proceso de desarrollo.

Podemos declarar variables mediante inferencia de tipos o asignación de tipos.

Inferencia de tipos

La inferencia de tipos significa que la variable deduce su tipo a partir del valor asignado:

let tokenKey = “Hello world”
let userId = 1234 .
 

El código es breve. Cuando la asignación proviene de un método, el tipo no se conoce de forma inmediata:

let tokenKey = GetAPIToken()

Asignación de tipos

Aquí el tipo de la variable forma parte explícita de la declaración:

let tokenKey: string = GetAPIToken()

Objetos

Los objetos en JavaScript son muy flexibles para guardar datos y definir estructuras. JavaScript permite guardar cualquier tipo de dato:

const player = {
  name: "Lebron",
  playerNumber: 23,
}

Un objeto en TypeScript se ve igual que un objeto de JavaScript, pero con los tipos inferidos.

El compilador revisa mi código y no permite asignar un string a una propiedad numérica:

tsc app.ts
app.ts:6:1 - error TS2322: Type '"hello "' is not assignable to type 'number'.
6 player.numberPlayer = "hello ";
Found 1 error.
 

Podemos definir la estructura de un objeto y el compilador comprobará cada una de sus propiedades:

let player: {
  name: string,
  numberPlayer: number,
  age: number,
  active: boolean,
} = {
  name: "legion",
  numberPlayer: 23,
  age: 32,
  active: true,
}

La asignación de tipos en objetos también soporta objetos anidados. Ten en cuenta que esta definición de tipos es solo para el compilador de TypeScript y no existe en JavaScript.

Arreglos

Los arreglos son un tipo de dato muy útil porque permiten guardar cualquier tipo de elemento o datos combinados. Al igual que con los objetos, TypeScript infiere el tipo de dato almacenado.

Si defines un arreglo con una lista de números, TypeScript lo declara como un arreglo de números o puedes definir su tipo:

let loteryNumbers: number[]
loteryNumbers.push(45)
 
let luckyNumbers = [1, 2, 3, 4]
 
luckyNumbers.push("hello world")

El compilador muestra un error cuando intentamos agregar un tipo de dato distinto:

 tsc app.ts
app.ts:15:19 - error TS2345: Argument of type '"hello world"' is not assigned to type 'number' parameter.
 
15 luckyNumbers.push("hello world");
 

Para terminar

Esto te da una base para empezar con TypeScript y te ayuda a evitar algunos de los errores más comunes.

Si te gustó este post, compártelo. Foto de Jeremy Bezanger en Unsplash