Interface vs Type Alias en Typescript

Comencemos diciendo que Typescript soporta la declaración de Types Aliases tanto como de Interfaces Ninguno sustituye al otro, sólo aparecieron a destiempo y puedes usarlos para los mismos fines o distintos, ninguno es mejor, depende del caso de uso y ámbito. Por ejemplo:

Type es ultimamente muy popular a la hora de declarar tipos para componentes cuando se usa con React, mientras que Interface es más popular cuando se usa con clases (anteriormente también se usaban clases con React, pero tu sabes que ya no usamos componentes de clase) así que si estás escribiendo software lejos del frontend y tienes algo de experiencia con otro lenguaje que se use lejos del navegador, Interface te puede parecer más familiar.

Type aliases vs Interfaces

Recordemos rápidamente las sintaxis para cada una de estas opciones que tenemos en Typescript para un objeto:

1type User ={
2	age:number;
3	name:string;
4	};
5

Esta es la declaración de un alias (Aliased object type)

1interface User {
2	age:number;
3	name:string;
4	}
5

Este es la sintaxis equivalente para una Interface.

Las dos sintaxis son casi idénticas.

DATO CURIOSO: Los developers que prefieren escribir el punto y coma, regularmente lo colocan después de la definición de un alias de tipo y no después de la definición de una interface. Esta preferencia sigue la convención de las declaraciones de una variable contra la de una clase o función (en nuestro cerebro lo diferenciamos de forma similar pues)

A nivel sistema (type checker system) de Typescript los mensajes producidos por las interfaces son las mismas producidas por un alias de tipo así como los errores de asignabilidad con variaciones nimias.

Pero, sí hay un par de diferencias entre estas dos declaraciones:

Diferencias puntuales

1. Las interfaces pueden "merguearce" (can be merge together) a otras para aumentar so compatibilidad. Esto es particularmente útil cuando se trabaja con código de otras programadoras, principalmente si se escriben paquetes npm (creadores de librerías). (si quieres saber más de este punto no dudes en preguntarme en Twitter
2. Las interfaces pueden ser usadas para trabajar y checar los tipos de las estructuras de clase mientras que los alias de tipo no.
3. Las interfaces son generalmente más rápidas cuando se quiere guardar en cache un tipo internamente en vez de hacer el copy-paste a un objeto nuevo de la forma en que lo hace un alias de tipo.
4. Las interfaces se consideran "objetos nombrados" (named objects) mientras que los alias de tipo se les conoce como Literales de objeto anónimo (unnamed object literal), en casos muy peculiares, los errores podrían ser más fáciles de interpretar para los primeros.

He de decir que esta lista no fue fácil de recopilar, ya que las diferencias son realmente de nivel muy bajo y pocas veces encontrarás ventajas marcadas, aún así en las documentaciones oficiales así como de los expertos regularmente encontrarás la recomendación general de que prefieras interfaces sobre los alias de tipo (sip, a pesar de que es más común encontrarse los alias en desarrollo font-end)

PERO

Desde mi humilde trinchera yo he encontrado un caso muy común en mi día a día y que me ha sido suficiente para preferir los alias de tipo sobre interfaces sobre todo en React.

y son Las uniones. Te explico:

Cuando se tienen muchos tipos definidos en el frontend que pueden venir de la base datos, digamos fragments de GraphQL o los más recientes modelos de Prisma es muy común que nuestros componentes tengan props que pueden hacer uso extensivo de las uniones algo así:

1type ComponentPropsType = ThumbnailFragmentType | MiniThumbnailFragment;
2

En este caso, si el componente es altamente reusable y soporta 2 tipos de datos que vienen de nuestra DB (GraphQL en este caso) es muy útil declarar sus tipos con un alias porque podemos hacer una union sin mayor esfuerzo, incluso podríamos agregar algunas llaves extra sin problema:

1type ComponentPropsType = (ThumbnailFragmentType | MiniThumbnailFragment) & {localRandomKey:boolean};
2

Esto NO es posible al definir una interface.

Conclusión

Considero importante decir que; debemos ver estas diferencias como mero bagaje intelectual, es decir, saberlo por ser mejores en la herramienta pero nunca para convertirnos en religiosos, o polarizarnos.

Como programador creativo y "problem solver" siempre podré combinar cualquiera de las 2 sintaxis si es necesario para que mi programa funcione, se trata de saber más para crear sinergia para ofrecer libertad y soluciones, no para inquisitar otras opiniones o estilos, además a TS le da igual cual prefieras.

A mi me gusta más usar alias la verdad, pero no tengo problema en usar interfaces si lo necesito, justifico mi gusto con lo anterior (Uniones), pues ocupo TS más con React, pero definitivamente si el ámbito del uso de TS para ti es el back-end y tienes clases por todos lados, las interfaces seguro son tu pan de cada día. Así es esto diverso, y hermoso.

Y ya, ¡no te duermas! si este tema te gusta porfa, házmelo saber en twitter de esa forma sabré que debo seguir escribiendo sobre TS.

Gracias por tu tiempo. Te mando un abrazo. Bliss.