TypeScript による React の改善方法: スムーズな開発エクスペリエンス、より少ないバグ (useState の例を使用)

シナリオとそれに関連付けられたタスクから始めましょう。

ユーザーの現在のステータスを表示し、更新できるステータス バーを備えたメッセージング アプリケーションがあります。ユーザーがステータスを変更できるドロップダウンを追加し、useState() を使用して UI でのユーザーの現在のステータスを表示および更新する必要があります。

わかりやすくするために、この記事では useState の実装のみに焦点を当てます。記事の最後には、単純な例であっても TypeScript がいかに強力なオプションであるかが理解できるでしょう。

タスク

userStatus を保存および更新する useState() を定義する必要があり、5 つの可能なステータス オプション (active としましょう) の 1 つで初期化されます。

可能なオプションはすべて次のとおりです:

1. アクティブ (アクティブ)
2. アウェイ (アウェイ)
3. 邪魔しないでください (dnd)
4. 休暇中 (休暇)
5. 不在中 (OOO)

JSX/JS

これは非常に簡単な作業ですよね? useState を定義して active に初期化し、set 関数を使用してステータスを更新するだけで完了です。

でも待ってください！誰かが私のコードをレビューしているとき、または後で (たとえば、1 週間、2 週間、1 か月、6 か月など後) にこのコードにアクセスした場合、何が起こりますか? 彼らはどのようにしてすべての可能な/有効なオプションを知るのでしょうか?

ああ！はい、useState の横にコメントを追加して、これらがすべての可能なオプションであることを知らせることができます。

しかし、これは良い解決策ではありませんね?では、どうすれば改善できるでしょうか?

オブジェクトの検索

オブジェクト ルックアップは、私たちの問題に対する非常に優れた解決策です。そこで、UserStatus というオブジェクト ルックアップを定義することから始め、それを使用して userStatus 値を設定しましょう。

それでは、useState 定義を更新しましょう。

それでは、ステータスを更新してみましょう。

ああ！これを見て、エディターでオートコンプリートを取得し、UserStatus の定義を確認することで、userStatus のすべての可能な/有効な値をチェックできるようになりました。

オブジェクト ルックアップの問題

オブジェクト検索メソッドは問題を解決したように見え、単にコメントを追加するよりもはるかに優れた解決策であることは間違いありませんが、まだ 2 つの大きな問題があります。

1. 後で私たちのコード部分にアクセスする人は、状態を設定するためにオブジェクト検索を使用していることを知っておく必要があります。これは些細なことのように思えるかもしれませんが、コンポーネントが成長し、より複雑になると、誰かが私たちの実装に気づかなくなることが非常に簡単になることを想像してください。
2. オブジェクト検索を認識している場合でも、誰もが状態にランダムな値を設定することを妨げることはありません。  

それでは、これらの問題をどのように解決できるでしょうか?
答え: タイプスクリプト

TSX/TS

ソリューションをもう一度始めましょう。ただし、今回は .tsx または Typescript ファイルを使用します。まず useState() 関数を定義し、値 active で初期化します。

今のところ何も変わっていないように見えますが、実際は変わっています。 userStatus 値を更新しましょう。

ああ！ご覧のとおり、一部の設定関数の周囲には恐ろしい赤い波線のエラー行が表示されますが、文字列値を設定している関数には表示されません。これは、Typescript が初期値 (つまり、文字列型) から状態の型を推測しているためです。

はい、これにより userStatus 状態に文字列以外の値を設定できなくなりますが、それでもランダムな文字列値を設定できるわけではなく、考えられるすべてのオプションを文書化するためにオブジェクト検索を使用する必要があります。と尋ねるかもしれません。
 

「一石二鳥」をやってみましょう。

明示的な型とジェネリックス

Typescript では、カスタム タイプ を作成できます。また、React でフック定義 (この場合は useState() フック) に使用できる ジェネリック もサポートしています。

React コンポーネントに新しい UserStatus タイプを作成しましょう。

それでは、この型を useState 定義で使用してみましょう。

ここまでは、オブジェクト ルックアップ メソッドで行っていた方法とすべて同じように見えますが、Typescript の魅力は、set 関数と状態値を使い始めるところにあります。

1. userStatus の型定義を取得します。
   

2. setUserStatus 関数のオートコンプリート。
   

3. 有効な値と無効な値について適切な検証を取得します。
   

あれを見てください、

1. userStatus の上にマウスを移動し、その型定義を検索するだけで、すべての有効な値のドキュメントを取得できます。
2. ただし、set 関数を使用すると、すべての有効なオプションのオートコンプリートが自動的に提供されるため、状態値の型定義を確認する必要はありません。
3. 今度は、文字列以外の値を設定するとエラーが表示されるだけでなく、無効な文字列値を使用するとエラーも表示されます (つまり、無効な入力に対しては常にエラーが表示されます)。

結論

ここまでで、TypeScript がどのように開発エクスペリエンスを実際に向上させることができるかについて、十分に理解できたのではないでしょうか。ここでは簡単な例で表面をなぞっただけですが、私たちが構築している実際のアプリケーションについて考えてみてください。TypeScript を使用すると、バグが大幅に減り、全体的な開発者のエクスペリエンスが大幅に向上する可能性があります。

この記事が、すべての React アプリケーションで Typescript の使用を開始し、素晴らしい Web エクスペリエンスを構築することを促進することを願っています。

この記事が気に入ってつながりたい場合は、Linked および X/Twitter で私とつながることができます

以上がTypeScript による React の改善方法: スムーズな開発エクスペリエンス、より少ないバグ (useState の例を使用)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。