DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Fundamentos de TypeScript | #12: Interfaces

Las interfaces probablemente sean la caracter穩stica que m獺s ver獺s en proyectos desarrollados con TypeScript.

聶Qu矇 es una interfaz?

En palabras poco t矇cnicas una interfaz es como una especie de molde para nuestro datos. No debemos confundir el t矇rmino con la UI de una app, en este caso el concepto de interfaz se relaciona m獺s con la estructura de los datos de nuestro software. Por ejemplo:

interface Persona {
  id:number;
  nombre: string;
  apellido: string;
  edad: number;
  esSoltero: boolean;
}

interface Perro {
  id:number | string;
  nombre: string;
  color: string[];
  raza:string;
  sexo: "Macho" | "Hembra"
}

interface Vehiculo {
  placa:string;
  color: string;
  ruedas: number;
  puertas: number;
  marca: string;
  esNuevo: boolean;
}
Enter fullscreen mode Exit fullscreen mode

En este caso, tenemos 3 interfaces: Persona, Perro, Vehiculo. Cada una de ellas se declara con la palabra reservada interface seguido del nombre de la interfaz (en Pascal Case) y entre llaves todas las propiedades con sus tipos de datos separadas por ;.

Interfaz como tipo de dato

Las interfaces se usan como tipos de datos personalizables, con los ejemplos anteriores podr穩amos crear objetos de la siguiente manera:

interface Persona {
  id:number;
  nombre: string;
  apellido: string;
  edad: number;
  esSoltero: boolean;
}

const pedro:Persona = {
  id:1,
  nombre:"Pedro",
  apellido:"Sanchez",
  edad:36,
  esSoltero:true,
}
Enter fullscreen mode Exit fullscreen mode

Nuestra variable pedro es de tipo Persona, por ende debe tener OBLIGATORIAMENTE todas las variables declaradas en Persona.

El contrato de una Interfaz

En el ejemplo anterior de dice que pedro cumple el contrato de Persona puesto que tiene todos los datos declarados de manera correcta: id, nombre, apellido, edad, esSoltero. Si faltara un dato podr穩amos decir que pedro no cumple con el contrato de Persona puesto que m穩nimamente deber穩a incluir todos los datos de la interfaz.

Propiedades opcionales

Las interfaces al igual que las funciones soportan valores opcionales con el operador ?

interface Vehiculo {
  placa:string;
  color: string;
  ruedas?: number;
  puertas?: number;
  marca: string;
  esNuevo: boolean;
}

const hilux:Vehiculo = {
  placa: 'HYK-256',
  color: 'rojo',
  marca: 'Toyota',
  esNuevo: true,
}
Enter fullscreen mode Exit fullscreen mode

La variable hilux es de tipo Vehiculo pero tanto ruedas como puertas son propiedades opcionales, por ello al crear el objeto y no incluir esos valores no tenemos ning繳n error.

Propiedades de solo lectura

Con la palabra reservada readonly podemos especificar las propiedades que solo son de lectura y que no podremos cambiar:

interface Perro {
  id:number | string;
  readonly nombre: string;
  color: string[];
  raza:string;
  sexo: "Macho" | "Hembra"
}

// nombre es de solo lectura

const boby:Perro = {
  id: "125-boby",
  nombre:"Boby",
  color: ["cafe","blanco"],
  raza:"cooker",
  sexo: "Macho"
}

boby.raza = "pastor aleman";
console.log(boby)
boby.nombre = "Rufo"
Enter fullscreen mode Exit fullscreen mode

Si intentamos cambiar la raza del objeto boby no hay problema, pero si hacemos lo mismo con nombre nos dar獺 un error:
Cannot assign to 'nombre' because it is a read-only property.

Herencia de interfaces

Usando la palabra extends podemos heredar interfaces:

interface Vehiculo {
  placa:string;
  color: string;
  ruedas?: number;
  puertas?: number;
  marca: string;
  esNuevo: boolean;
}

interface Bicicleta extends Vehiculo {
  esMonta簽era: boolean;
  traccion: number;
}

const miBici:Bicicleta = {
  placa: '123-abc',
  color: 'negro',
  marca: 'Santusa',
  esNuevo: true,
  esMonta簽era:true,
  traccion: 21,
}
Enter fullscreen mode Exit fullscreen mode

La interfaz Bicicleta hereda todas las propiedades de Vehiculo, por tanto, el objeto miBici debe tener tanto los atributos de Bicicleta como los de Vehiculo.

Para este ejemplo podemos hacer opcionales las propiedades ruedas y puertas ya que para la interfaz Bicicleta no tiene mucho sentido.

Conclusiones

  • Las interfaces son una forma de estructurar los datos de nuestro software creando tipos de datos espec穩ficos.
  • Puedes usar par獺metros opcionales con ?
  • Las interfaces soportan herencia con extends
  • Con readonly podemos hacer propiedades de solo lectura.

Referencias

Discussion (0)