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...