web-dev-qa-db-fra.com

Migration de create-react-app de javascript vers dactylographié

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 vers TypeScript.

J'ai vu qu'il existe un moyen de créer une application React avec TypeScript en utilisant l'indicateur:

--scripts-version=react-scripts-ts

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

javascriptreactjstypescriptcreate-react-app
28
galvan

J'ai trouvé une solution pour migrer create-react-app de javascript vers TypeScript, de cette façon ne nécessite pas d'éjection.

  1. Créez un projet de réaction temporaire avec TypeScript en exécutant la commande create-react-app --scripts-version=react-scripts-ts (Remarque - nécessite create-react-app à installer globalement)
  2. Dans votre propre projet - sous package.json fichier 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, ajoutez "react-scripts-ts": "2.8.0" à package.json.
  4. À partir du projet que vous avez créé à l'étape 1, copiez les fichiers: tsconfig.json, tsconfig.test.json tslint.json à votre propre projet
  5. Dans le cadre de votre propre projet, dans package.json, dans la section des scripts, modifiez react-scripts instances à react-scripts-ts (doit être sous start, build, test et eject
  6. Installez les saisies pour react en installant les modules suivants en utilisant yarn ou npm: @types/node, @types/react et @types/react-dom. Mettez dans la section devDependencies si vous utilisez package.json.
  7. Changement index.js nom du 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 une modification supplémentaire dépend de ce que vous avez dans votre fichier index.js (si cela dépend sur les modules JS du projet).

Vous pouvez maintenant exécuter votre projet et cela pourrait fonctionner, pour ceux d'entre vous qui obtiennent une erreur contenant You may need an appropriate loader to handle this file type concernant les fichiers .js, cela se produit car babel ne sait pas comment charger le fichier .js à partir des fichiers .tsx. Ce que nous devons faire, c'est changer la configuration du projet. La façon dont je l'ai trouvé sans exécuter eject utilise react-app-rewired package. Ce package vous permet de configurer la configuration externe qui sera ajoutée/remplacer les paramètres de projet par défaut. Nous allons utiliser babel pour charger ce type de fichiers. Passons à autre chose:

  1. Installez le package react-app-rewired utilisant du fil ou npm
  2. Dans votre dossier racine (où package.json est localisé) créez 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 package.json pour que le start/start-js, build, test et eject les scripts utilisent react-app-rewired comme indiqué dans le projet readme . Par exemple. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".

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

J'espère que ça aide

Comme suggéré ici dans les commentaires, il est possible de définir: "compilerOptions": { "allowJs": true} dans votre fichier tsconfig.json, vous pouvez donc mélanger JS et TS sans avoir à réactiver l'application. Merci de le mentionner!

MISE À JOUR: create-react-app version 2.1.0 supporte TypeScript donc pour ceux d'entre vous qui partent de zéro, vous pouvez l'utiliser pour créer une nouvelle application avec TypeScript, et selon la documentation cela devrait être fait 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 packages suivants aux dépendances de votre projet avec la commande suivante:

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

puis vous pouvez simplement renommer .js en fichiers .ts.

52
galvan

Créer React App la version 2.1.0 est sortie aujourd'hui avec le support TypeScript aujourd'hui. Cela signifie que vous n'avez plus besoin d'éjecter ou d'utiliser le react-scripts-ts fourchette; tout ce que vous devez faire si vous avez déjà un projet Create React App installe les packages 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 fichiers vers .ts fichiers pour commencer à utiliser TypeScript.

(Si vous avez une application existante utilisant la fourche create-react-app-TypeScript, voici un tutoriel sur comment la porter sur une application Create React App .) ==.)

7
Vincent

Vous devrez éjecter une configuration pour ce faire.

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

  1. Ajoutez les extensions TypeScript tsx et ts à la table extensions dans les configurations webpack (dev et prod).

  2. Ajoutez ts-loader. Voici un exemple

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

  3. Changer eslint en tslint

  4. Ajoutez source-map-loader pour avoir la possibilité de déboguer des fichiers TypeScript.

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

  5. Créez un fichier de configuration TypeScript et n'oubliez pas de définir allowJs sur true.

2
niba