Quiere usar TypeScript en React pero no está seguro de cómo empezar. ¡Has venido al lugar correcto! (Esta vez no hablaremos de la sintaxis de TS, solo de ponernos en marcha).

Nueva aplicación desde cero

Si está creando una nueva aplicación y usa create-react-app, los documentos de Create React App son excelentes:

Puede iniciar una nueva aplicación de TypeScript usando plantillas. Para usar nuestra plantilla de TypeScript proporcionada, agregue --template typescriptal comando de creación.

npx create-react-app my-app --template typescript

Si se ha encontrado en una situación en la que ya ha comenzado un proyecto y desea convertirlo a TypeScript, ¡no se preocupe! También hay una solución para eso.

Convertir una aplicación existente a TypeScript

En la terminal, navegue hasta el directorio de su aplicación, donde querrá instalar TypeScript:

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

Aquí es donde podría tener problemas. Si abre su App.tsxarchivo, verá que casi todo está subrayado en rojo. No es bueno.

Primero, querrá estar import React from 'react'en la parte superior del archivo si aún no lo estaba haciendo.

Si está en VSCode y pasa el cursor sobre cualquier elemento subrayado, obtendrá el mensaje "No se puede usar JSX a menos que se proporcione el indicador '-jsx'". En este punto, puede hacer clic en la opción "Solución rápida" o puede solucionarlo manualmente. Si hace clic en "Solución rápida", obtendrá una opción que dice "Habilite el indicador '—jsx' en su archivo de configuración". Una vez que hace clic en él, tarda uno o dos segundos en cargarse y luego los errores deberían desaparecer.

Si desea hacerlo manualmente, vaya a su tsconfig.jsonarchivo, busque la clave de "jsx"y cambie el valor a "react"en lugar de react-jsx.

Si aún recibe un error en su tsconfig.jsarchivo, es posible que esté usando diferentes versiones de TypeScript. Escriba cmd + shift + ppara abrir la configuración rápida en VSCode y busque "TypeScript: seleccione la versión de TypeScript...". Haga clic en eso y elija "Usar la versión del espacio de trabajo".

¡Esperemos que ahora esté libre de errores, su código se esté compilando y esté listo para poner en marcha una aplicación fantástica!

¡Me encantaría conectarme! Encuéntrame en LinkedIn , GitHub , Twitter .

Recursos útiles