Cómo utilizar TypeScript con Create React App

Para comenzar, hablemos un poco sobre lo que es Create React App. Esta es una herramienta de React que incluye todos los paquetes de JavaScript que el desarrollador necesita para ejecutar un proyecto con este framework creado por Facebook, incluidas allí la transpilación de código, el linting básico y los sistemas y pruebas de compilación. En síntesis, el desarrollador puede comenzar a escribir código React con mínima experiencia, no necesita configurar sistema de compilación como Webpack ni configurar Babel para transpilar su código.

En su versión 2.0, Create React App ahora da soporte a TypeScript, lo que le permite a los usuarios JavaScript escribir con convenciones TypeScript en el lado frontend de React.

Usar TypeScript en Create React App

Para comenzar, se necesita tener instalado Node.js, tener conocimiento básico de React y TypeScript, además de un editor de código moderno.

Primero, abre tu ventana de terminal y ve hasta el directorio donde quieres construir tu proyecto. Luego, usa create-react-app con –template typescript:

npx create-react-app cra-typescript-example --template typescript

La ventana mostrará este mensaje:

Creating a new React app in [..]/cra-typescript-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

El –template typescript le da la instrucción al script Create React App de construir, utilizando el formato cra-template-typescript. Esto agregará el paquete Typescript principal.

Cuando esté completa la instalación, tendrás una nueva aplicación React con soporte de TypeScript. Navega en el directorio de tu proyecto y la puedes abrir en tu editor de código. 

¿Qué es TypeScript?

En su sitio web oficial, señalan que “TypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript, lo que le brinda mejores herramientas a cualquier escala. TypeScript agrega sintaxis adicional a JavaScript para admitir una integración más estrecha con su editor. Detecte los errores desde el principio en su editor”.

TypeScript se encuentra en una relación inusual con JavaScript. TypeScript ofrece todas las características de JavaScript y una capa adicional además de estas: el sistema de tipos de TypeScript. Por ejemplo, JavaScript proporciona primitivas de lenguaje como cadena y número, pero no verifica que las haya asignado de manera consistente. TypeScript lo hace.

Esto significa que su código JavaScript de trabajo existente también es código TypeScript. El principal beneficio de TypeScript es que puede resaltar comportamientos inesperados en su código, lo que reduce la posibilidad de errores.

Te recomendamos en video