Typescript: types vs interfaces

Typescript , es un “superset” del lenguaje Javascript cuyo objetivo es esencialmente añadir un tipado estático. Es un lenguaje en actual evolución, actualmente en la versión 3.6, amado y odiado en partes iguales por los programadores, pero de esta guerra no vamos a hablar por el momento.

Debido a las requisitos del proyecto en el que se encuentra un servidor, ⚛️ React con Typescript para la SPA, me he visto obligado a programar en este lenguaje y me han surgido una serie de preguntas respecto a la utilización de alias de tipos e interfaces que me gustaría compartir.

Los tipos y las interfaces han evolucionado a lo largo de las versiones y actualmente son muy similares, aunque todavía mantienen unas pequeñas diferencias: las interfaces son más “extensibles” debido a la posibilidad de unir sus declaraciones, y los tipos son más “componibles” debido a la posibilidad de unir los tipos. 💥

Veamos algunas diferencias con código:

1. Los tipos pueden declararse como tipos primitivos, uniones o tuplas mientras que las interfaces no.

1. Se tarda menos en escribir un tipo que una interfaz.

1. Los tipos pueden crear interseccion con otros tipos, mientras que las interfaces no.

1. La unión en la declaración de una interfaz no funciona con los tipos.

1. No puedes extender una interfaz con un tipo si se usa el operador unión en su definición de tipo.

1. La palabra clave in puede usarse para iterar sobre todos los elementos en una unión de claves. Podemos utilizar esta función para generar mapped types. Con interfaces no se puede.

1. La sintaxis para implementar una clase con un tipo o con una interfaz es la misma. Pero la sintaxis para extender una clase no.

Conclusión

Debido a estas pequeñas diferencias entre tipos e interfaces, la decisión de usar una sobre otra generalmente depende de su estilo de programación. Si escribes código orientado a objetos, usa interfaces, si escribes código funcional, usa alias de tipo.

¿Y que pasa con React? React es un lenguaje funcional por naturaleza. Los componentes funcionales generalmente son preferibles a los componentes basados en clases. Los Hooks en React son funciones que sólamente se utilizan sobre componentes funcionales, los HOC, Redux, funciones puras, etc, salen de una programación funcional.

📢 Por todas estas razones, se deben usar los alias de tipos en vez de las interfaces en todas tus aplicaciones de React. 📢