javascript - property - title label html
MigraciĆ³n de la aplicaciĆ³n crear-reaccionar de javascript a mecanografiado (3)
Comencé un proyecto de reacción utilizando la aplicación crear-reaccionar hace unos meses y estoy interesado en migrar el proyecto de Javascript a Typescript.
Vi que hay una manera de crear una aplicación de reacción con escritura de tipo usando la bandera:
--scripts-version=react-scripts-ts
Pero no encontré ninguna explicación de cómo puedo migrar un proyecto JS existente a TS. Necesito que se haga de manera incremental para poder trabajar con los archivos .js y .ts y poder realizar la transformación a lo largo del tiempo. ¿Alguien tiene alguna experiencia con esta migración? ¿Cuáles son los pasos necesarios que deben realizarse para que esto funcione?
Encontré una solución para migrar create-react-app de javascript a mecanografía, de esta forma no es necesario expulsar.
- Cree un proyecto de reacción temporal con mecanografiado ejecutando el comando
create-react-app --scripts-version=react-scripts-ts
(Nota: requiere que la aplicacióncreate-react-app
esté instalada globalmente) - En su propio proyecto, en el archivo
package.json
, elimine losreact-scripts
- Agregue
react-scripts-ts
a su proyecto ejecutando el comandoyarn add react-scripts-ts
o si está usando npm, entoncesnpm install react-scripts-ts
. O agregue"react-scripts-ts": "2.8.0"
a package.json. - Desde el proyecto que creó en el paso 1, copie los archivos:
tsconfig.json, tsconfig.test.json tslint.json
en su propio proyecto - Bajo su propio proyecto, en
package.json
, en la sección de scripts, cambiereact-scripts
instancias dereact-scripts-ts
areact-scripts-ts
(debe estar bajostart
,build
,test
yeject
- Instale los tipos para reaccionar instalando los siguientes módulos usando yarn o npm:
@types/node
,@types/react
y@types/react-dom
. Ponga en la seccióndevDependencies
si usa package.json. - Cambiar el nombre del archivo
index.js
aindex.tsx
- En su archivo tsconfig.json agregue la siguiente configuración:
"allowSyntheticDefaultImports": true
- para más información
NOTA: el paso 7 puede requerir una modificación adicional dependiendo de lo que tenga en su archivo index.js (si depende de los módulos JS en el proyecto).
Ahora puede ejecutar su proyecto y podría funcionar, para aquellos de ustedes que reciben un error que contiene You may need an appropriate loader to handle this file type
respecto a los archivos .js, esto sucede porque Babel no sabe cómo cargar .js archivo de archivos .tsx. Lo que tenemos que hacer es cambiar la configuración del proyecto. La forma en que lo encontré haciéndolo sin ejecutar eject
es usando el paquete react-app-rewired . Este paquete le permite configurar la configuración externa que se agregará / anulará la configuración predeterminada del proyecto. Lo que haremos es usar babel para cargar este tipo de archivos. Sigamos adelante:
- Instale el paquete
react-app-rewired
usando yarn o npm - En su carpeta raíz (donde se encuentra
package.json
) cree un nuevo archivo con el nombreconfig-overrides.js
Ponga este código en el archivo
config-overrides
:var paths = require(''react-scripts-ts/config/paths'') module.exports = function override(config) { config.module.rules.push({ test: //.(js|jsx)$/, include: paths.appSrc, loader: require.resolve(''babel-loader''), options: { babelrc: false, presets: [require.resolve(''babel-preset-react-app'')], cacheDirectory: true, }, }) return config }
Edite package.json para que los scripts start/start-js
, build
, test
y eject
utilicen react-app-rewired como se muestra en el archivo Léame del proyecto . Por ejemplo, "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"
.
Ahora puedes comenzar el proyecto y el problema debe ser resuelto. Es posible que necesite modificaciones adicionales según su proyecto (tipos adicionales, etc.).
Espero eso ayude
Como se sugiere aquí en los comentarios, es posible definir: "compilerOptions": { "allowJs": true}
en su archivo tsconfig.json, para que pueda mezclar JS y TS sin reaccionar a la aplicación. Gracias por mencionar esto!
ACTUALIZACIÓN: create-react-app versión 2.1.0 admite escritura de tipo de escritura para aquellos de ustedes que están comenzando desde cero, pueden usarla para crear una nueva aplicación con escritura de escritura, y de acuerdo con la documentation , debe hacerse con el siguiente comando:
$ npx create-react-app my-app --typescript
Para los proyectos existentes, después de actualizar a la versión 2.1.0, agregue los siguientes paquetes a las dependencias de su proyecto con el siguiente comando:
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
y luego simplemente puede cambiar el nombre de .js a archivos .ts.
La aplicación Create React documentation hoy. Eso significa que ya no necesita expulsar o usar la bifurcación react-scripts-ts
; todo lo que debe hacer si tiene un proyecto existente de Crear aplicación React es instalar los paquetes necesarios:
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # or
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
Luego, simplemente puede cambiar el nombre de los archivos .js
archivos .ts
para comenzar a usar TypeScript.
(Si tienes una aplicación que utiliza la bifurcación de crear, reaccionar y escribir, escribe aquí un tutorial sobre cómo portarlo a la aplicación normal Crear React ).
Necesitará expulsar una configuración para hacer eso.
Después de expulsar debes realizar los siguientes pasos:
- Agregue las extensiones
tsx
yts
a la tabla deextensions
en las configuraciones de webpack (dev y prod). Añadir ts-loader. Aquí hay un ejemplo
{ test: //.(ts|tsx)$/, include: paths.appSrc, use: [ { loader: require.resolve(''ts-loader''), }, ], },
Cambiar eslint a tslint
Agregue source-map-loader para tener la posibilidad de depurar archivos Typescript.
{ test: //.js$/, loader: require.resolve(''source-map-loader''), enforce: ''pre'', include: paths.appSrc, }
Cree un archivo de configuración de
allowJs
y recuerde establecerallowJs
en true.