✨ TypeScript での広告のアイデア

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

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

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

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

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

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 (推奨): エラーについて推測しないでください

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

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

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

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...
}

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`;

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")

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);
  }
}

注: ライブラリのコンポーネントを設計している場合は、必須フィールドに手間がかかるため、これはお勧めしません。

まとめ

TypeScript は素晴らしいですが、完璧なツールはありません。

これら 5 つの間違いを回避すると、よりクリーンで安全、保守しやすいコードを作成できるようになります。

その他のヒントについては、私の無料電子書籍 101 React Tips & Tricks をご覧ください。

?バグを見つけよう

?今週のヒント

それはラップですか?.

<script> // Detect dark theme var iframe = document.getElementById('tweet-1869351983934738523-882'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869351983934738523&theme=dark" } </script>コメントを残しますか? Typescript の間違いを共有します。<script> // Detect dark theme var iframe = document.getElementById('tweet-1869050042931449902-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869050042931449902&theme=dark" } </script>

「???」を忘れずに入力してください。

React を学習している場合は、私の 101 React ヒントとコツの本を 無料 でダウンロードしてください。

このような記事が気に入ったら、私の無料ニュースレター、FrontendJoyにご参加ください。

毎日のヒントが必要な場合は、X/Twitter または Bluesky で私を見つけてください。

以上が✨ TypeScript での広告のアイデアの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。