Agregar TypeScript a un proyecto React

Presentaremos cómo agregar TypeScript a proyectos de reacción nuevos y antiguos usando comandos simples.

Agregar TypeScript a un proyecto React

Muchos desarrolladores prefieren usar TypeScript en proyectos de React y Angular. A veces obtenemos aplicaciones o proyectos creados en JavaScript y queremos agregar TypeScript a estos proyectos.

En este tutorial, veremos ambos escenarios en los que creamos una nueva aplicación React o agregamos un TypeScript a un proyecto ya creado. Primero, comencemos con la nueva instalación de la aplicación reaccionar.

Hay dos formas de instalar la aplicación React usando la plantilla de TypeScript. Una es usando npx.

Usando el siguiente comando, podemos instalar fácilmente una nueva aplicación React con la plantilla de TypeScript.

# NPX
npx create-react-app New-app --template typescript

Este comando instalará una nueva aplicación de reacción con la última versión. Ahora, si queremos instalar la aplicación reaccionar usando el hilo, podemos ejecutar el siguiente comando.

# YARN
yarn create-react-app New-app --template typescript

Ahora, veamos nuestro segundo escenario en el que ya tenemos un proyecto creado con la plantilla de JavaScript y queremos convertirlo en un marco de trabajo de TypeScript.

Primero, debemos ejecutar el siguiente comando para instalar TypeScript en nuestro proyecto usando npm, como se muestra a continuación.

# NPM
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Si hemos instalado nuestro proyecto usando hilo, debemos ejecutar el siguiente comando.

# YARN
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Una vez que hemos instalado el TypeScript y sus dependencias, podemos cambiar el nombre de los archivos JavaScript de .js a .ts. Después de cambiar todos los archivos a TypeScript, reiniciaremos nuestro servidor de desarrollo.

Habrá algunos errores relacionados con los tipos. Debemos corregir estos errores de acuerdo con las necesidades del proyecto antes de desarrollar nuevas funciones.