web-dev-qa-db-ja.com

create-react-appをjavascriptからtypescriptに移行する

数か月前にcreate-react-appを使用して反応プロジェクトを開始しました。プロジェクトをJavascriptからTypeScriptに移行するのは興味深いです。

フラグを使用して、TypeScriptで反応アプリを作成する方法があることがわかりました。

--scripts-version=react-scripts-ts

しかし、既存のJSプロジェクトをTSに移行する方法については説明がありませんでした。時間をかけて変換を行えるように、.jsファイルと.tsファイルの両方で作業できるように、段階的に行う必要があります。この移行の経験はありますか？この作業を行うために必要な手順は何ですか？

javascriptreactjstypescriptcreate-react-app
28
galvan

Create-react-appをjavascriptからTypeScriptに移行するソリューションを見つけました。この方法でejectを必要としません。

  1. コマンドcreate-react-app --scripts-version=react-scripts-tsを実行して、TypeScriptで一時的な反応プロジェクトを作成します（注-create-react-appをグローバルにインストールする必要があります）
  2. 独自のプロジェクト-package.jsonファイルの下でreact-scriptsを削除します
  3. コマンドreact-scripts-tsを実行してプロジェクトにyarn add react-scripts-tsを追加するか、npmを使用している場合はnpm install react-scripts-tsを追加します。または、"react-scripts-ts": "2.8.0"をpackage.jsonに追加します。
  4. 手順1で作成したプロジェクトから、次のファイルをコピーします：tsconfig.json, tsconfig.test.json tslint.json
  5. 独自のプロジェクトのpackage.jsonのスクリプトセクションで、react-scriptsインスタンスをreact-scripts-tsに変更します（start、build、testおよびeject
  6. Yarnまたはnpmを使用して@types/node、@types/react、および@types/react-domのモジュールをインストールすることにより、Reactのタイピングをインストールします。 package.jsonを使用する場合は、devDependenciesセクションに入れます。
  7. index.jsファイル名をindex.tsxに変更します
  8. Tsconfig.jsonファイルに次の構成を追加します："allowSyntheticDefaultImports": true- 詳細

[〜＃〜] note [〜＃〜]ステップ7は、index.jsファイルの内容によって異なります（依存する場合は、追加の変更が必要になる場合がありますプロジェクトのJSモジュールで）。

これでプロジェクトを実行できます。jsファイルに関するYou may need an appropriate loader to handle this file typeを含むエラーが発生した場合、babelは.tsxファイルから.jsファイルをロードする方法を知らないため、プロジェクトが動作する可能性があります。行う必要があるのは、プロジェクトの構成を変更することです。 ejectを実行せずにそれを行う方法は、 react-app-rewired パッケージを使用しています。このパッケージを使用すると、デフォルトのプロジェクト設定を追加/オーバーライドする外部構成を構成できます。ここでは、これらの種類のファイルをロードするためにbabelを使用します。次に進みましょう：

  1. Yarnまたはnpmを使用してパッケージreact-app-rewiredをインストールします
  2. ルートフォルダー（package.jsonがある場所）に、config-overrides.jsという名前の新しいファイルを作成します

  3. このコードを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
}

Package.jsonを編集して、start/start-js、build、test、およびejectスクリプトが プロジェクトのreadmeに示すようにreact-app-rewiredを使用するようにします 。例えば。 "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"。

これでプロジェクトを開始でき、問題は解決するはずです。プロジェクトによっては、追加の変更が必要になる場合があります（追加のタイプなど）。

それが役に立てば幸い

コメントで提案されているように、tsconfig.jsonファイルで"compilerOptions": { "allowJs": true}を定義することが可能であるため、react-app-rewiredなしでJSとTSを混在させることができます。これに言及してくれてありがとう！

UPDATE：create-react-appバージョン2.1.0はTypeScriptをサポートしているため、ゼロから始めている人はそれを使用して新しいアプリケーションを作成できますTypeScript、および documentation に従って、次のコマンドで実行する必要があります。

$ npx create-react-app my-app --TypeScript

既存のプロジェクトの場合、バージョン2.1.0に更新した後、次のコマンドを使用して、次のパッケージをプロジェクトの依存関係に追加します。

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

そして、単に.jsの名前を.tsファイルに変更できます。

52
galvan

作成React App v2.1.0はTypeScriptサポート付きで今日リリースされました 今日。つまり、react-scripts-tsフォークをイジェクトしたり使用したりする必要がなくなりました;- 必要なこと 既存のCreate React Appプロジェクトが必要なパッケージをインストールしている場合：

$ 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

その後、.jsファイルの名前を.tsファイルに変更するだけで、TypeScriptの使用を開始できます。

（create-react-app-TypeScriptフォークを使用して既存のアプリがある場合、 通常のCreate React App に移植する方法）のチュートリアルがあります。

7
Vincent

そのためには、構成をイジェクトする必要があります。

取り出したら、次の手順を実行する必要があります。

  1. TypeScript拡張tsxおよびtsをwebpack構成（devおよびprod）のextensionsテーブルに追加します。

  2. Ts-loaderを追加します。ここに例があります

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

  3. Eslintをtslintに変更

  4. Source-map-loaderを追加して、TypeScriptファイルをデバッグできるようにします。

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

  5. TypeScript構成ファイルを作成し、allowJsをtrueに設定することを忘れないでください。

2
niba