0Pricing
TypeScript Academy · レッスン

in、instanceof、判別可能なunion

inやプロパティのチェック、クラスに対するinstanceof、判別可能なunionを使って安全に分岐します

「in、instanceof、判別可能なunion」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：プロパティのチェックにin、クラスにinstanceof、明確な分岐に判別ユニオンを使う、3つの強力なガードを練習します。

in演算子

inは、実行時にプロパティ名をテストして型を絞り込みます。オブジェクトリテラルのユニオンに適しています。

type HasLength = { length: number };

function print(v: string | HasLength) {
  if ("length" in v) {
    // v is HasLength
    console.log("len:", v.length);
  } else {
    // v is string
    console.log(v.toUpperCase());
  }
}

print({ length: 3 });
print("ts");

instanceof

instanceofは、クラスベースの値のプロトタイプをチェックします。実行時にコンストラクターが利用できる場合に機能します。

class Person {
  constructor(public name: string) {}
}

function hello(x: Person | Date) {
  if (x instanceof Person) {
    console.log("Hi", x.name);
  } else {
    console.log("Year", x.getFullYear());
  }
}

hello(new Person("Ada"));
hello(new Date(2024, 0, 1));

判別ユニオン

判別ユニオンでは、kindのようなリテラルタグを使って分岐します。各ケースで完全に絞り込まれるため、switchを明確に記述できます。

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; size: number };

type Shape = Circle | Square;

function area(s: Shape): number {
  switch (s.kind) {
    case "circle":
      return Math.PI * s.radius ** 2;
    case "square":
      return s.size * s.size;
  }
}

console.log(area({ kind: "circle", radius: 2 }));
console.log(area({ kind: "square", size: 3 }));

ガードの組み合わせ

タグのチェックとinを組み合わせると、入れ子になった構造を絞り込み、安全なメンバーだけにアクセスできます。

type FetchOk = { status: "ok"; data: { length: number } };
type FetchErr = { status: "error"; message: string };

type Result = FetchOk | FetchErr;

function handle(r: Result) {
  if (r.status === "ok" && "length" in r.data) {
    console.log("items:", r.data.length);
  } else {
    console.log("error:", r.message);
  }
}

handle({ status: "ok", data: { length: 5 } });
handle({ status: "error", message: "oops" });

ガイドライン

ガイドライン：

  • プロパティに基づくユニオンにはinを使用します。
  • クラスにはinstanceofを使用します。
  • 明確な制御フローには判別ユニオンを使用します。

in演算子の確認

確認問題：実行時にプロパティをチェックし、型を絞り込む演算子はどれですか？

まとめ

まとめ：inはプロパティをテストし、instanceofはクラスをチェックし、判別ユニオンは明確で型安全なswitchを実現します。

よくある質問

「in、instanceof、判別可能なunion」レッスンは無料ですか？

はい。「in、instanceof、判別可能なunion」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「in、instanceof、判別可能なunion」で何を学びますか？

inやプロパティのチェック、クラスに対するinstanceof、判別可能なunionを使って安全に分岐します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「in、instanceof、判別可能なunion」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. typeof、等価性、truthinessによる絞り込み
  2. in、instanceof、判別可能なunion
  3. neverによる網羅性チェック（入門）
← TypeScript Academyに戻る