React es la librería frontend de moda. La recién publicada 2019 Stack Overflow Developer Survey lo coloca como el segundo framework más utilizado, mientras que la encuesta State Of JavaScript de 2018 posiciona a React como la librería/framework con mayor grado de satisfacción entre los desarrolladores frontend JavaScript.
Dicho esto, no todo es perfecto en el universo React. Muchos desarrolladores consideran que su falta de verificación de tipos estática es uno de sus puntos débiles y de ahí la creciente popularidad de herramientas como TypeScript, ampliamente adoptadas por otros frameworks, en el ecosistema React.
Qué vas as ver en esta entrada
Antes de empezar: ¿Qué es un tipo?
Los tipos son atributos de los datos que indican al compilador o interpretador cómo se pretenden utilizar esos datos así como las operaciones que se pueden realizar con ellos.
JavaScript cuenta con seis tipos de datos primitivos:
- Boolean – true o false
- Null – sin valor
- Undefined – variable que ha sido declarada pero a la cual no se le ha asignado valor
- Number – enteros, coma flotante, etc.
- String – listas de caracteres
- Symbol – valor único, diferente a cualquier otro valor
Todo lo demás queda bajo el tipo Object.
Verificación de tipos
La verificación de tipos es el proceso mediante el cual se verifican y aplican las restricciones de cada tipo. Si esta verificación ocurre a la hora del compilado se denomina verificación estática, si ocurre durante la ejecución la llamamos verificación dinámica.
JavaScript es un lenguaje con tipado dinámico, es decir, la verificación ocurre al ejecutar el programa. Esto le aporta una mayor flexibilidad, pero aumenta considerablemente la posibilidad de errores.
¿Qué ventajas aporta la verificación estática de tipos?
Detección temprana de errores
La comprobación de tipos durante el compilado nos permite detectar errores mucho antes en el ciclo de desarrollo.
Mayor eficiencia
El tipado estático a menudo resulta en código que se ejecuta más rápido y consumiendo menos memoria que código con tipado dinámico ya que el compilador sabe exactamente con el tipo de los datos con los que está tratando.
Mayor legibilidad del código
El código con tipado estático tiende a ser más fácil de leer. Tomemos la siguiente función como ejemplo:
A primera vista, no sabemos cómo utilizar esta función. ¿Es tax un number o un boolean? ¿Es área un string o un number? ¿Y amount?
Ahora la misma función con tipos definidos:
Ahora a simple vista es aparente cómo se ha de utilizar la función: los argumentos que se le han de pasar y qué devuelve.
TypeScript es una de las formas más populares de introducir verificación de tipos estática en el ecosistema React.
¿Qué es TypeScript?
TypeScript, desarrollado por Microsoft, es un superconjunto de JavaScript que añade una capa opcional de verificación de tipos. Al ser un superconjunto de JavaScript, es posible utilizar código JavaScript ya existente en programas TypeScript.
TypeScript trae consigo el tipado estático mediante el uso de anotaciones de tipo:
Los tipos primitivos de TypesScript son number, boolean y string mientras que estructuras con tipos dinámicos son del tipo any. Si ningún tipo ha sido explícitamente declarado, el compilador de TypeScript lo inferirá a partir del contexto.
TypeScript también soporta el uso de archivos de declaración en los cuales se describe la forma de librerías populares para que puedan aprovechar todas las ventajas de TypeScript.
DefinitelyTyped es un repositorio en GitHub donde se alojan las declaraciones de tipos para una gran parte de las librerías JavaScript más populares.
Otra de las grandes ventajas de TypeScript es su autocompletado de código e IntelliSense, compatible con la mayoría de IDEs modernos como VSCode, Sublime, Atom, WebStorm e incluso VIM, presenta sugerencias de código en tiempo real, mejorando la experiencia del desarrollo.
Cómo incorporar TypeScript a un proyecto React
Si quieres empezar un nuevo proyecto con create-react-app añadir TypeScript es tan fácil como ejecutar:
¡Listo! Ya puedes empezar a utilizar TypeScript en tu proyecto React.
Si eres de los que les gusta configurar todo más al detalle, puedes empezar un proyecto con TypeScript, desde cero, utilizando Webpack, el empaquetador de módulos más popular del momento:
Primero instalamos webpack y ts-loader, el módulo encargado de cargar los archivos TypeScript en webpack:
Continuamos instalando React, TypeScript y los tipos para React:
Ahora toca crear un archivo webpack.config.js en el cual configuraremos el funcionamiento de webpack:
A continuación creamos el archivo tsconfig.json para configurar el compilador de TypeScript:
Ya casi estamos! Lo único que falta es cambiar los scripts de npm para que utilicen webpack. En el archivo package.json de tu proyecto:
Conclusión
Poder contar con verificación de tipos con TypeScript en un entorno React nunca ha sido tan fácil como ahora.
¡Ya no tienes excusa para poder disfrutar de todas las ventajas que aporta TypeScript utilices el framework que utilices!