Interface vs Class vs Type

Interface

Las interfaces solo existen en tiempo de compilación de nuestra aplicación y no en tiempo de ejecución. El uso de una interfaz es para definir y verificar los tipos, una vez el compilador de TS comience a realizar su función la interfaz se eliminará de la compilación final en JavaScript por lo que no tendrá peso.

Class

A diferencia de las interfaces las clases existen tanto en tiempo de compilación como de ejecución. Además en las clases se pueden definir propiedades e implementar métodos para crear nuevas instancias de una clase y reutilizarlas.

Type

Los tipos por el contrario que una interfaz puede declararse como un tipo primitivo, uniones o tuplas. Ejemplo:

// Primitivo
type nombre = string

// Objeto
type ejeX = { x: number }
type ejeY = { y: number }

// Unión
type coordenadas = ejeX & ejeY

// Trupla
type trupla = [string, number]

Cabe destacar que también nos permite crear una mezcla de tipos... Por ejemplo:

// Posibilidad de utilizar dos tipos o uno.
type vehiculo = { matricula: string } | { combustible: string }

const fiat: vehiculo = { matricula: '666666VH' }
const opel: vehiculo = { combustible: '40l' }
const ford: vehiculo = { matricula: '666666VH', combustible: '40l' }

type coche = { bastidor: string }
// Mezclar ambos types en uno.
type moto = coche & vehiculo

const yamaha: moto = { matricula: '666666VH', bastidor: '111111' }

Conclusión

En mi caso siempre empiezo a trabajar con una interface para definir tipos y si veo que en mi interfaz necesito implementar alguna propiedad o método, lo cambio a una clase.

En el caso de cuando utilizar interface o un type es:

  • Interface: Código orientado a objetos.
  • Type: Código funcional.

En mi paso por React suelo utilizar más los type ya que mis componentes son componentes funcionales... además del uso de Redux, funciones puras, etc...