✨ TypeScript での広告のアイデア-jsチュートリアル-php.cn

私は ❤️ TypeScript が大好きです。

特に JavaScript の悪名高い 「未定義の値にアクセスできません」 エラーが発生した後はそうです。

ただし、TypeScript が優れているとはいえ、自分自身を傷つける方法はまだあります。

この投稿では、TypeScript における 5 つの悪い習慣と、それらを回避する方法を紹介します。

?有利にスタートするには、無料の 101 React ヒントとコツの本をダウンロードしてください。

✨ ad Ideas in TypeScript

1. エラーをタイプ Any として宣言する

例

次のコードスニペットでは、エラーをキャッチし、それを type any として宣言します。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

ログイン後にコピー

なぜダメなのか❌

エラーに文字列型のメッセージフィールドがあるという保証はありません。

残念ながら、型アサーションのせいで、コードでは型アサーションがそうであると仮定してしまいます。

コードは、開発中は特定のテストケースで動作しますが、運用環境ではひどく壊れる可能性があります。

代わりに何をすべきか✅

エラーの種類を設定しないでください。デフォルトでは不明である必要があります。

代わりに、次のいずれかを行うことができます:

オプション 1: タイプガードを使用して、エラーのタイプが正しいかどうかを確認します。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

ログイン後にコピー

オプション 2 (推奨): エラーについて推測しないでください

エラーの種類について推測するのではなく、各種類を明示的に処理し、ユーザーに適切なフィードバックを提供します。

特定のエラータイプを判断できない場合は、部分的な詳細ではなく、完全なエラー情報を表示することをお勧めします。

エラー処理の詳細については、この優れたガイド「より良いエラーメッセージの作成」を参照してください。

✨ ad Ideas in TypeScript

2. 同じ型の複数の連続したパラメータを持つ関数を持つ

例

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

ログイン後にコピー

なぜそれが悪いのか ❌

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

ログイン後にコピー

代わりに何をすべきか ✅

オブジェクトパラメーターを使用して、各フィールドの目的を明確にし、間違いのリスクを最小限に抑えます。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

ログイン後にコピー

✨ ad Ideas in TypeScript

3. 複数の分岐があり戻り値の型がない関数がある

例

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

ログイン後にコピー

なぜそれが悪いのか ❌

新しいanimalTypeを追加すると、正しく構造化されていないオブジェクトが返される可能性があります。
戻り値の型の構造を変更すると、コードの他の部分で追跡が困難な問題が発生する可能性があります。
タイプミスにより、誤った型が推論される可能性があります。

代わりに何をすべきか ✅

関数の戻り値の型を明示的に指定します:

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

ログイン後にコピー

✨ ad Ideas in TypeScript

4. オプションのフィールドを使用する代わりに不要な型を追加する

例

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

ログイン後にコピー

なぜそれが悪いのか ❌

スケールしない: 新しいフィールドを追加するには、複数の新しいタイプを作成する必要があります
型チェックがより複雑になり、追加の型ガードが必要になります
型名が混乱し、メンテナンスが困難になります

代わりに何をすべきか ✅

オプションのフィールドを使用して、型をシンプルかつ保守しやすく保ちます。

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

ログイン後にコピー

✨ ad Ideas in TypeScript

5. さまざまなコンポーネントレベルでプロパティをオプションにする

例

無効化されたプロパティは、すべてのコンポーネントでオプションです。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

ログイン後にコピー

なぜそれが悪いのか ❌

無効なプロパティを渡すのを忘れやすく、その結果、フォームが部分的に有効になってしまいます

代わりに何をすべきか ✅

内部コンポーネントの共有フィールドを必須にします。

これにより、適切なプロップの通過が保証されます。これは、下位レベルのコンポーネントが見落としを早期に発見するために特に重要です。

上記の例では、すべての内部コンポーネントで無効にする必要があります。

function getAnimalDetails(animalType: "dog" | "cat" | "cow") {
  switch (animalType) {
    case "dog":
      return { name: "Dog", sound: "Woof" };
    case "cat":
      return { name: "Cat", sound: "Meow" };
    case "cow":
      return { name: "Cow", sound: "Moo" };
    default:
      // This ensures TypeScript catches unhandled cases
      ((_: never) => {})(animalType);
  }
}

ログイン後にコピー