Interface vs Type

José Aular / 26.08.2022

Interface vs Type

Tabla de contenido

  1. Concepto
  2. Sugerencia
  3. Ejemplo de Type
  4. Ejemplo de Interface
  5. Referencias

Concepto

Hay dos formas diferentes en TypeScript para declarar tipos de objetos: interface y type.

Las interface y los type son muy similares y, en muchos casos, puedes elegir entre ellos libremente. Casi todas las funciones de una interface están disponibles en type, la distinción clave es que un type no se puede volver a abrir para agregar nuevas propiedades frente a una interface que siempre es extensible.

Sugerencia

Considera usar type para las props y state en los componentes de React, por consistencia y porque está más restringido.

Siempre usa interface para la definición de la API pública al crear una biblioteca o definiciones de tipo ambiental de terceros, ya que esto permite que un consumidor las amplíe a través de la fusión de declaraciones si faltan algunas definiciones.

Ejemplo de Type

lib/types.ts
type Hobby = {
  name: string;
};
type Address = {
  city: string;
  street: string;
};
type User = {
  name: string;
  age: number;
  email?: string;
  hobbies: Hobby[];
};
// Intersection Type
type UserData = User & Address;
const userData: UserData = {
  name: "Michael Jordan",
  age: 59,
  hobbies: [{ name: "Basketball" }, { name: "Golf" }],
  city: "Chicago",
  street: "2700 Point Lane",
};

Ejemplo de Interface

lib/interfaces.ts
interface Hobby {
  name: string;
}
interface Address {
  city: string;
  street: string;
}
// Extends
interface User extends Address {
  name: string;
  age: number;
  email?: string;
  hobbies: Hobby[];
}
const userData: User = {
  name: "Michael Jordan",
  age: 59,
  hobbies: [{ name: "Basketball" }, { name: "Golf" }],
  city: "Chicago",
  street: "2700 Point Lane",
};

Referencias