DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

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,
}
Enter fullscreen mode Exit fullscreen mode

Es posible a簽adir nuevas propiedades as穩:

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

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,
}
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
*/
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)