Migration de create-react-app de javascript vers typescript

Question

J'ai commencé un projet react en utilisant create-react-app il y a quelques mois et je suis intéressé par la migration du projet de Javascript à Typescript.

J'ai vu qu'il y a un moyen de créer une application react avec typescript en utilisant le drapeau :

--scripts-version=react-scripts-ts

Mais je n'ai pas trouvé d'explication sur la façon dont je peux migrer un projet JS existant vers TS. J'ai besoin que cela soit fait de manière incrémentielle afin de pouvoir travailler avec les deux fichiers .js et .ts pour pouvoir effectuer la transformation au fil du temps. Quelqu'un a-t-il une expérience de cette migration ? Quelles sont les étapes à suivre pour que cela fonctionne ?

Answer 1

J'ai trouvé une solution pour migrer create-react-app de javascript à typescript, de cette manière ne nécessite pas éjecter.

1. Créez un projet react temporaire avec typescript en exécutant la commande create-react-app --scripts-version=react-scripts-ts (Note - nécessite create-react-app à installer globalement)
2. Dans votre propre projet - sous package.json supprimer le react-scripts
3. Ajouter react-scripts-ts à votre projet en exécutant la commande yarn add react-scripts-ts ou si vous utilisez npm, alors npm install react-scripts-ts . Ou bien, ajoutez "react-scripts-ts": "2.8.0" à package.json.
4. Depuis le projet que vous avez créé à l'étape 1, copiez les fichiers : tsconfig.json, tsconfig.test.json tslint.json à votre propre projet
5. Sous votre propre projet, dans package.json sous la section scripts, changez react-scripts instances à react-scripts-ts (devrait être sous start , build , test y eject
6. Installez les typages pour react en installant les modules suivants à l'aide de yarn ou npm : @types/node , @types/react y @types/react-dom . Mettre en devDependencies si vous utilisez le fichier package.json.
7. Changement index.js nom de fichier à index.tsx
8. Dans votre fichier tsconfig.json, ajoutez la configuration suivante : "allowSyntheticDefaultImports": true - pour plus d'informations

NOTE L'étape 7 peut nécessiter des modifications supplémentaires en fonction de ce que vous avez dans votre fichier index.js (s'il dépend de modules JS dans le projet).

Maintenant vous pouvez exécuter votre projet et il pourrait fonctionner, pour ceux d'entre vous qui obtiennent l'erreur qui contient You may need an appropriate loader to handle this file type en ce qui concerne les fichiers .js, cela arrive parce que babel ne sait pas comment charger un fichier .js à partir d'un fichier .tsx. Ce que nous devons faire est de changer la configuration du projet. Le moyen que j'ai trouvé pour le faire sans exécuter eject utilise react-app-rewired paquet. Ce paquet vous permet de configurer une configuration externe qui sera ajoutée/supprimée aux paramètres par défaut du projet. Ce que nous allons faire est d'utiliser babel pour charger ce type de fichiers. C'est parti :

1. Installer le paquet react-app-rewired en utilisant yarn ou npm
2. Dans votre dossier racine (où package.json se trouve) créer un nouveau fichier avec le nom config-overrides.js

3. Mettez ce code dans config-overrides fichier :

   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
   }

Modifiez le fichier package.json pour que le start/start-js , build , test y eject Les scripts utilisent react-app-rewired comme indiqué dans le fichier readme du projet . Par exemple "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom" .

Vous pouvez maintenant commencer le projet et le problème devrait être résolu. Vous pourriez avoir besoin de modifications supplémentaires en fonction de votre projet (types supplémentaires, etc.).

J'espère que cela vous aidera

Comme suggéré ici dans les commentaires, il est possible de le définir : "compilerOptions": { "allowJs": true} dans votre fichier tsconfig.json, ainsi vous pouvez mélanger JS et TS sans react-app-rewired. Merci de l'avoir mentionné !

UPDATE : La version 2.1.0 de create-react-app supporte le typecript, donc pour ceux d'entre vous qui partent de zéro, vous pouvez l'utiliser pour créer une nouvelle application avec le typecript. documentation il faut le faire avec la commande suivante :

$ npx create-react-app my-app --typescript

Pour les projets existants, après la mise à jour vers la version 2.1.0, ajoutez les paquets suivants aux dépendances de votre projet avec la commande suivante :

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

et vous pouvez alors simplement renommer les fichiers .js en .ts.

Answer 2

Créer une application React La version 2.1.0 est sortie aujourd'hui avec le support de TypeScript. aujourd'hui. Cela signifie que vous n'avez plus besoin d'éjecter ou d'utiliser les react-scripts-ts fourchette ; tout ce que vous devez faire si vous avez un projet existant Create React App est d'installer les paquets requis :

$ 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

Vous pouvez alors simplement renommer .js pour .ts pour commencer à utiliser TypeScript.

(Si vous avez une application existante utilisant le fork create-react-app-typescript, voici un tutoriel sur comment le porter vers une application régulière Create React App .)

Answer 3

Pour ce faire, vous devrez éjecter une configuration.

Après l'éjection, vous devez effectuer les étapes suivantes :

1. Ajouter des extensions typescript tsx y ts au extensions tableau dans les configurations de webpack (dev et prod).

2. Ajouter ts-loader. Voici un exemple

   {
     test: /\.(ts|tsx)$/,
     include: paths.appSrc,
     use: [
       {
         loader: require.resolve('ts-loader'),
       },
     ],
   },

3. Changer eslint en tslint

4. Ajout de source-map-loader pour avoir la possibilité de déboguer les fichiers Typescript.

   {
     test: /\.js$/,
     loader: require.resolve('source-map-loader'),
     enforce: 'pre',
     include: paths.appSrc,
   }

5. Créez un fichier de configuration Typescript et pensez à définir allowJs à vrai.