React で TypeScript を使用するときによくある間違い

私たちは皆、勉強したり実践したりすることで学びます。ことわざにあるように、あらゆるスキルを習得するには「実行して学ぶ」ことが重要です。 React と TypeScript を数年間使った後、私は確かに多くのことを学びました。ただし、開発者はこれらのテクノロジを組み合わせて使用​​するときによくある間違いを犯します。私が遭遇した最も一般的な 5 つの間違いは次のとおりです:

1. 小道具の不適切な入力

• 間違い: インターフェイス/タイプを使用しているか、まったく使用していないため、props を適切に入力していません。
• 解決策: 常に TypeScript のインターフェイスまたは型を使用して prop 型を定義します。これにより、エラーを早期に発見し、より適切なドキュメントを提供することができます。

interface MyComponentProps {
  title: string;
  count: number;
}

export default function MyComponent({ title, count }: MyComponentProps) {
 ... 

2. 呼吸ごとに「任意の」タイプを使用する

• 間違い: 「any」型を使いすぎて TypeScript の型チェックをバイパスし、TypeScript を使用する目的を損ないます。
• 解決策: 可能な限り特定の型またはジェネリックを使用します。型が不明な場合は、不明を使用するか、型ガードを通じて型を改良することを検討してください。

// Avoid
const handleEvent = (event: any) => {

// Prefer
const handleEvent = (event: MouseEvent<HTMLButtonElement>) => {

3. ライブラリでのタイプ セーフティの無視

• 間違い: 外部ライブラリまたはサードパーティのコンポーネントを適切に入力できないため、実行時エラーが発生する可能性があります。
• 解決策: 一般的なライブラリの型定義には DefinitelyTyped (@types/packages) を利用します。ライブラリに型定義がない場合は、カスタム型を作成するか、モジュール拡張を使用します。

// Install type definitions
npm install @types/lodash

// Import with types
import _ from 'lodash';

4. 状態と効果の不適切な処理

• 間違い: 状態と効果を間違って入力すると、useEffect の状態の更新と依存関係の配列で問題が発生します。
• 解決策: useState で state を適切に入力し、useEffect の依存関係が正しく指定されていることを確認します。

// State typing
const [count, setCount] = useState<number>(0);

// Effect with dependency array
useEffect(() => {
...
}, [count]); 

5. 型推論を利用しない

• 間違い: TypeScript が自動的に型を推測できる場合でも、すべてを手動で入力します。これは冗長で冗長なコードです。
• 解決策: 簡単です...コードをクリーンで簡潔に保つために、TypeScript が適切な型を推論できるようにします。

// Overly verbose
const add = (a: number, b: number): number => {
  return a + b;
};

// Leveraging type inference
const add = (a: number, b: number) => {
  return a + b; 
};

これらが唯一ではありませんが、おそらく React/TypeScript 開発者として私がやってしまう最も一般的な間違いです。
より堅牢で保守しやすく、エラーのないコード (存在する場合) を書き続けるためには、学ぶべきことがまだたくさんあります。

以上がReact で TypeScript を使用するときによくある間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。