ReactアプリをTypeScriptに移行する方法

既存のReactプロジェクトをTypeScriptに移行する：ステップバイステップガイド

最初にタイプスクリプトを学習している場合、「既存のプロジェクトを切り替えてください！これが学習するための最良の方法です！」 ReactアプリをTypeScriptに移行します。

この記事はあなたの友達になり、プロジェクトをTypeScriptに移行するのを手伝うことを目的としています。説明するために、移行プロセス中に自分自身を移行した個人プロジェクトのいくつかの断片を使用します。

キーポイント

• プロジェクトにタイプスクリプトを追加し、Tsconfig.jsonを追加して、シンプルさから始まり、すべてのファイルの変換、ストリンジェンシーの向上、クリーニング、成功した移行を祝うことにより、タイプスクリプトへのReactアプリケーションの移行を開始します。
• タイプスクリプトを採用して、シンプルなコンポーネントから始めてステップ。ファイル拡張子を.tsxに変更し、タイプコメントを追加します。プロジェクト内のすべてのファイルを段階的に変換します。
より厳格なルールを有効にすることにより、tsconfig.jsonの厳格さを改善します。これは、エラーが発生したときにそれらを修正して、段階的に実行できます。目標は、迅速に前進し、後で戻って問題を修正することです。
@TS-IgnoreやFixMelaterなどのショートカットを使用して、移行プロセス中の負担を軽減します。時間が経つにつれて、これらのショートカットを正しいタイプの安全性に置き換えることを優先します。

計画

このプロセスを気が遠くないようにするために、チャンクで移行を実行できるように、ステップに分解します。大きなタスクを扱うとき、私はいつもこれを役立ちます。プロジェクトを移行するために行うすべての手順を次に示します。

add typescript

tsconfig.jsonを追加
シンプルさから始めます
すべてのファイルを変換
厳格さを改善します
クリーニング
6. を祝います
7. 注：プロセス全体で最も重要なステップはステップ7です。そこに到達するためにこれらの手順を完了することしかできませんが。

1プロジェクトへの追加

最初に、プロジェクトにタイプスクリプトを追加する必要があります。 ReactプロジェクトがCreate-React-Appで起動されていると仮定すると、ドキュメントに従って実行できます。

またはYARNを使用している場合：

まだTypeScriptに変更されていないことに注意してください。コマンドを実行してプロジェクトをローカルで開始すると（私の場合はYarnが起動します）、何も変わりません。もしそうなら、それは素晴らしいでしょう！次のステップに移動する準備ができています。

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

2

タイプスクリプトを活用する前に、tsconfig.jsonを介して構成する必要があります。私たちが始める簡単な方法は、次のコマンドを使用して1つを構築することです。

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

これにより、基本的な知識が得られます。

TypeScriptとまだやり取りしていません。準備するために必要な措置を講じました。次のステップは、ファイルをTypeScriptに移行することです。これにより、このステップを完了して、次のステップに進むことができます。

3

TypeScriptの美しさは、段階的に採用できることです。単純なコンポーネントからの移行の最初の部分を開始できます。私のプロジェクトでは、次のようなボタンコンポーネントから始めます：

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

正しく変換するには、2つのことを行う必要があります。

ファイル拡張子を.tsx

に変更します
1. タイプコメントを追加
このコンポーネントは2つの小道具を使用しているため、何かを変更する必要があります。

プロジェクトを実行して、何も壊れていないことを確認することにより、すべてが適切に機能していることを再確認しましょう。ここでは、React-Scriptsは新しい変更を自動的に検出し、Tsconfig.jsonを私たちのために変更することに注意してください！見て！これはどれほど美しいですか？

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

すべてがうまくいけば、私たちのプロジェクトは機能し続けます。背中を軽くたたく！最初のファイルをTypeScriptに移行しました。ここでやめたいなら、私たちはできますが、前進し続けましょう。

4。すべてのファイルを変換します

次のステップは、プロジェクト内のすべてのファイルでステップ3を実行することです。あなたが移行しているプロジェクトが非常に大きい場合は、この複数の反復を行うことをお勧めします。そうでなければ、あなたは自分自身を使い果たすかもしれません。

このステップでは、使用しているサードパーティライブラリに従って追加のパッケージを追加する必要がある場合があります。たとえば、私は瞬間を使用しているので、yarn add -D @型/モーメントを実行して、型を開発として追加する必要があります。

これを行うときは、次のポイントを覚えておく必要があります。

エラーの前に// @ts-ignoreを追加することにより、タイプスクリプトエラーを抑制します

ファイルがjsx（つまり

）を使用している場合、ファイル拡張子は.ts

の代わりに.tsxである必要があります。

プロジェクトをローカルに実行して、すべてが機能していることを確認します（それらが必要です）
このステップを完了した後、難しい作業が完了しました！私たちのプロジェクトはTypeScriptを使用しますが、その利点を活用するために厳密さを増やす必要があります。
• 5
• ルールを有効にします

ローカルスタートアッププロジェクト

エラーを修正

次のルールについてこのプロセスを繰り返します。

"noimplicitany"：true
"strictnullchecks"：true
"noimplicthis"：true
"Alwaysstrict"：true

トリックを共有したいです。暗黙的にタイプがあるものを見つけて、この時点でそれを修正する方法がわからない場合は、修正しないでください。これを作成し、それを使用してエラーを排除します：

私たちの目標は、迅速に前進し、後でこれらの問題を修正するために戻ることです。

• これにより、プロジェクトにより多くのタイプの安全性がもたらされます。コンパイラオプションの詳細を読みたい場合は、TypeScriptマニュアルの関連コンテンツを読むことができます。

  これが完了した後、これらを置き換えることができます：

  • "noimplicitany"：true
  • "strictnullchecks"：true
  • "noimplicthis"：true
  • "Alwaysstrict"：true

  これを使用してください：

  • "strict"：true

  これにより、これらの厳格なオプションも有効になります：

  • strictbindcallapply
  • strictnullchecks
  • strictFunctionTypes
  • strictpropertyInitialization
  この時点で、プロジェクトの標準的な厳格さレベルに達しました。追加のチェックを追加したい場合は、これらのルールを追加できます。
  "nounusedlocals"：true
  • "nounusedparameters"：true
  • "noimplicitreturns"：true
  • 「nofallthroughcasesinswitch」：true
  満足している厳格さのレベルに達したら、次のステップに進むことができます。

  6ショートカットをきれいにします

  @ts-igroreを追加するか、Fixmelaterタイプを使用した場合、戻って修正する時が来ました。このすべてを一度に行う必要はありません。または決して行う必要はありませんが、これがプロジェクトの最大タイプの安全性を確保するための最後のステップになります。
  これらを修正する努力は時々時間の価値がありませんが、それだけの価値があります。あなたはあなたのチームと話し合い、何が理にかなっているのかを決める必要があります。
  7を祝います

  私たちはそれをしました！プロジェクトを正式にTypeScriptに移動しました。あなたの仕事を祝うために時間をかけてください。これは確かに些細な問題ではありません。特に、大規模なコードベースで作業している場合。

  覚えておくべきこと

  私たちの仕事をレビューしているとき、React ProjectをTypeScriptに移行するときに覚えておくべきことがいくつかあります。

  小さなものから始めます

  TypeScriptを徐々に採用する機能を使用します。自分のペースで一度に1つのドキュメントを行います。あなたとあなたのチームに理にかなっていることをしてください。すべての問題を一度に解決しようとしないでください。

  時間の経過に伴う事前の厳しさ

  最初から最大の厳密である必要はありません。これは旅です。時間の経過とともにレベルを上げます。最終的には、快適なレベルに到達します。 100％の厳しさを持っていなくても悲しんではいけません。ある種の安全性は、タイプの安全性がないよりも優れています。

  ショートカットに頼ってください

  @ts-ignoreおよびfixmelaterのヒントは、移行の負担を軽減するのに役立ちます。すべてを一度に変更する必要があるわけではありません。必要に応じてショートカットを使用しますが、それらを使用することについて気分が悪くないでください。繰り返しますが、ポイントは移行ですが、それほど苦痛ではないはずです。時間が経つにつれて、これらを正しいタイプの安全性に置き換えることを優先することができます。ただし、これらのツールは利用可能であることを忘れないでください。

  これは、ReactプロジェクトをTypeScriptに移行する唯一の方法ではありません。しかし、これは私にとってはうまくいきます。それが私を助けるのと同じくらいあなたを助けてくれることを願っています。

  さらに読み取り

  • TypeScriptとの反応：ベストプラクティス
  タイプスクリプトスキルを向上させるための実用的な方法
  タイプスクリプトがあなたをより良いJavaScript開発者にする方法
  javascript：初心者から忍者、第2版
  反応と反応ネイティブ - 秒版

  カール・ホーキーに感謝します。カール・ホーキーは、利点がほとんどなく、いくつかの欠点があるためタイプが推奨されないことを説明しました。詳細については、このgithubディスカッションを参照してください。 React.FC

  型の型へのアプリケーションを移行する際のFAQ
  タイプスクリプトとは何ですか、そしてなぜ私はそれへの私の反応の適用を移行することを検討すべきですか？ TypeScriptは、JavaScriptの静的に型付けられたスーパーセットで、拡張されたタイプチェック、コード品質、ツールサポートを提供します。 TypeScriptに移行すると、コンパイル時にエラーをキャッチし、コードの保守性を向上させ、Reactアプリケーションを扱うときに開発者エクスペリエンスを向上させるのに役立ちます。
  TypeScriptへのReactアプリケーションの移行を開始するにはどうすればよいですか？開始するには、TypeScriptテンプレートを使用したReactアプリの作成などのツールを使用してTypeScriptをプロジェクトに追加するか、TypeScriptをサポートするようにプロジェクトを手動で構成できます。また、それぞれ.jsおよび.jsxファイルを.tsと.tsxに変更する必要があります。
  JavaScriptコードをTypeScriptに変換するプロセスは何ですか？このプロセスには通常、次のものが含まれます。 a。 b変数、関数、および小道具にタイプコメントを追加します。 cタイプエラーを解決し、タイプスクリプトコンパイラ識別の問題を修正します。 dデータ構造と定数を定義するインターフェイスや列挙などのタイプスクリプト関数を使用します。
  ReactアプリケーションをTypeScriptに段階的に移動できますか？はい、アプリケーションを段階的に移行できます。既存のJavaScriptコードベースを維持しながら、コンポーネントまたはモジュールを一度に1つずつ変換できます。このようにして、開発ワークフローを中断することなく、段階的にTypeScriptに移行できます。
  TypeScriptとReactを使用することの利点は何ですか？いくつかの利点には、コード品質の向上、開発者の生産性の向上、コードオートコンプリートの強化、より強力なリファクタリングツール、一般的なエラーの早期検出などがあります。また、タイプの注釈を通じて、より明確かつより自己文書的なコードを提供します。
  タイプスクリプトに移行する際のサードパーティライブラリと依存関係を扱う方法は？多くの一般的なライブラリ（通常は.D.TS拡張機能を備えた）のTypeScriptタイプ定義ファイルを見つけるか、@Typesなどのツールを使用できます。タイプ定義が利用できない場合は、独自のタイプ定義を作成するか、タイプスクリプトの任意のタイプを使用して、未型のライブラリを処理することができます。
  私の開発ツールとIDEを構成して、ReactアプリケーションでTypeScriptを使用する方法は？ Visual Studioコードなどの最も人気のあるコードエディターやIDEは、TypeScriptを非常にサポートしています。編集者用のタイプスクリプトプラグインと拡張機能をインストールして、拡張されたTypeScript統合、オートコンプリート、エラーチェックの恩恵を受けることができます。

  TypeScriptに移行する際に、どのような一般的な課題がありますか？一般的な課題には、タイプエラーへのアドレス指定、タイプの定義がないサードパーティライブラリの処理、TypeScriptのタイプシステムの理解、TypeScriptが強制するより厳格なタイプチェックへの適応が含まれます。

以上がReactアプリをTypeScriptに移行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。