Fundamentos de TypeScript 🦆| #5: Objetos

Objetos en JavaScript

Como ya sabemos los objetos son una estructura de datos muy usada en JavaScript que consiste en pares clave-valor.

Por ejemplo:

const perro = {
   nombre:"Boby",
   edad:5,
}

Es posible añadir nuevas propiedades así:

const perro = {
   nombre:"Boby",
   edad:5,
}
perro.color = "negro";
/*
const perro = {
   nombre:"Boby",
   edad:5,
   color:negro,
}
*/

Objetos en TypeScript

En TypeScript un objeto se escribe exactamente igual que en JavaScript, pero con una gran diferencia en cuanto a funcionalidad:

const perro = {
   nombre:"Boby",
   edad:5,
}

Este objeto tiene una estructura implícita que TypeScript hace que el dev deba respetar, podemos ver que el objeto solo tiene 2 propiedades: nombre de tipo string y edad de tipo number, ergo la estructura sería la siguiente:

const perro: {
  nombre:string;
  edad:number;
} = {
   nombre:"Boby",
   edad:5,
}

Como notas, en vez de indicar un tipo de dato a la variable perro, la inicializamos con un objeto que dará estructura al objeto per se.
Esta sintaxis de objeto es explícita puesto que somos nosotros quienes debemos indicar los campos del objeto con sus correspondientes tipos. Se aconseja usar la sintaxis implicita, ya que TypeScript es lo suficientemente inteligente para inferir dicha estructura con solo proporcionar las claves y los valores.

Por ende, ambos objetos se consideran el mismo en TypeScript.

const perro = {
   nombre:"Boby",
   edad:5,
}

const perro: {
  nombre:string;
  edad:number;
} = {
   nombre:"Boby",
   edad:5,
}

Ambos objetos son iguales en cuanto a sintaxis

Accediendo a propiedades que no existen

En Javascript al intentar acceder a un propiedad inexistente de un objeto obtenemos un undefined:

const perro = {
  nombre:"Boby",
  edad:5,
}

console.log(perro.nombre); // "Boby"
console.log(perro.sexo); // undefined

Y al intentar añadirla basta con hacer lo siguiente:

const perro = {
  nombre:"Boby",
  edad:5,
}
perro.sexo = "macho"

/*
const perro = {
  nombre:"Boby",
  edad:5,
  sexo:"macho"
}
*/

En TypeScript hacer esto ya no es posible, si lo intentamos obtendremos un error como el siguiente:

const perro = {
  nombre:"Boby",
  edad:5,
}
perro.sexo = "macho"

Property 'sexo' does not exist on type '{ nombre: string; edad: number; }'.

Nos indica que el el objeto perro nunca declaramos una propiedad sexo, por ello no es posible agregarla.

Del mismo modo no tendremos un error similar si intentamos acceder a una propiedad que no existe.

Conclusiones

• Los objetos en typescript pueden declararse con una sintaxis implícita o explícita.
• Es recomendable usar una sintaxis explícita y dejar que typescript infiera los tipos de datos que se usan en el objeto.
• Ya no es posible añadir directamente propiedades a un objeto ni acceder a propiedades que no existen sin que antes el editor te lance un error.

Referencias