Diferencia entre Interface y Type en TypeScript

2 minuto(s)

En esta página:

En TypeScript podemos usar Type e Interface para describir la estructura de los objetos, pero ambas tienen características independientes que hacen que su uso sea útil en ciertas situaciones, elegir cual usar depende del Desarrollador, en este Post te mostraré la diferencia entre Type e Interface, para que puedas decidir correctamente cual usar.

Antes de continuar con este Post, te recomiendo leer el artículo: Que es TypeScript y otros Detalles, para que este Familiarizado con este Post.

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: Diferencia entre Interface y Type en TypeScript.

Types en TypeScript

El Sistema de Types muestra los diferentes tipos datos que admite TypeScript, estos se dividen en tres secciones principales: Any Type, Built-In-Type y User-Defined Type.

El Sistema de Types de TypeScript es responsable de verificar el tipo de datos de cualquier valor tomado antes de que se pueda utilizar como una entrada en el código.


// Creando un Type 
type Postres { 
  nombre: string; 
  precio: number 
} 
  
type Postres { 
  stock: number; 
} 
  
// Usando el Type con los datos 
const leerPostre: Postres = { 
  nombre: "Torta de Chocolate", 
  precio: 3.50, 
  stock: 39
}; 
  
console.log(leerPostre); 

// Obtengo 
"Duplicate identifier 'Postres'" error.

// Creando un Type

type Postres {

nombre: string;

precio: number

}

type Postres {

stock: number;

}

// Usando el Type con los datos

const leerPostre: Postres = {

nombre: "Torta de Chocolate",

precio: 3.50,

stock: 39

};

console.log(leerPostre);

// Obtengo

"Duplicate identifier 'Postres'" error.

El Sistema de Types de TypeScript es responsable de verificar el tipo de datos de cualquier valor tomado antes de que se pueda utilizar como una entrada en el código.

Interface en TypeScript

Una interface en TypeScript es un requerimiento sintáctico que todas las entidades deben seguir. Una interface solo puede contener la declaración de los miembros y es responsable de definir las propiedades, métodos y eventos.


// Creando una Interface 
interface Postres { 
  nombre: string; 
  precio: number 
} 
  
interface Postres { 
  stock: number; 
} 
  
// Usando la Inteface fusionada  
const leerPostre: Postres = { 
  nombre: "Torta de Chocolate", 
  precio: 3.50, 
  stock: 34
}; 
  
console.log(leerPostre); 

// Obtengo 
nombre: "Torta de Chocolate", precio: 3.50, stock: 34

// Creando una Interface

interface Postres {

nombre: string;

precio: number

}

interface Postres {

stock: number;

}

// Usando la Inteface fusionada

const leerPostre: Postres = {

nombre: "Torta de Chocolate",

precio: 3.50,

stock: 34

};

console.log(leerPostre);

// Obtengo

nombre: "Torta de Chocolate", precio: 3.50, stock: 34

En cierto modo, una Interface es responsable de definir una estructura estándar que las clases derivadas deberán seguir.

Diferencia entre Type e Interface

A continuación una tabla en donde describo la diferencia entre Type e Interface.

Type	Interface
Es una colección de tipos de datos.	Es una forma de sintaxis.
Admite la creación de un nuevo nombre para un tipo.	Proporciona una forma de definir las entidades.
Tiene comparativamente menos capacidades.	Tiene comparativamente más capacidades.
No admite el uso de un objeto.	Es compatible con el uso de un objeto.
No se pueden usar varias declaraciones fusionadas.	Se pueden usar múltiples declaraciones fusionadas.
Dos tipos que tienen el mismo nombre provocan una excepción.	Dos interfaces que tienen el mismo nombre se fusionan.
No tiene propósitos de implementación.	Tiene un propósito de implementación.

Conclusión

Hemos visto ejemplos de Type e Interface para entender un poco mejor cual es la diferencia entre ambos, conforme los uses iras comprendiendo mejor y otras diferencias que permiten independientemente realizar ciertas tares en TypeScript.