0Pricing
TypeScript Academy · レッスン

ユニオン型とリテラル型（基本的な絞り込み入門）

ユニオンで型を組み合わせ、正確な値を表すリテラル型を使い、基本的な絞り込みを適用します。

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

導入

目標：unionで複数の型を組み合わせ、リテラル型で値を制限する方法を学びます。これらは、より安全なAPIの作成に役立ちます。

Unionの基礎

Union型では|を使い、複数の型のうち1つを許可します。ここでは、stringまたはnumberです。

let value: string | number;
value = "hello";

value = 42;

// value = true; 
// Error, not allowed

リテラル型

リテラル型は、値を正確な選択肢に制限します。設定や列挙型でよく使われます。

let direction: "left" | "right";
direction = "left";

// direction = "up";
 // Error

絞り込みの基礎

絞り込みでは、実行時の型（例：typeof）をチェックして、安全にメンバーへアクセスします。

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

printId("abc");
printId(123.456);

判別可能なUnion

判別可能なUnionは、リテラルタグとオブジェクトを組み合わせます。kindで絞り込むと、TypeScriptが型を適切に判別してくれます。

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.size * shape.size;
  }
}

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

Unionとリテラル型を使う理由

Unionとリテラル型を使う理由：無効な状態を作れないようにし、自動補完を導き、コンパイラーがより早く誤りを検出できるようにするためです。

Unionチェック

クイックチェック：Union型とは何ですか？

まとめ

まとめ：Unionには|を使い、正確な値にはリテラル型を使い、安全に分岐するには絞り込みを使います。これらの機能により、TSの表現力と安全性が高まります。

よくある質問

「ユニオン型とリテラル型（基本的な絞り込み入門）」レッスンは無料ですか？

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

「ユニオン型とリテラル型（基本的な絞り込み入門）」で何を学びますか？

ユニオンで型を組み合わせ、正確な値を表すリテラル型を使い、基本的な絞り込みを適用します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ユニオン型とリテラル型（基本的な絞り込み入門）」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. プリミティブ型とアノテーション
  2. 型推論とany対unknown
  3. ユニオン型とリテラル型（基本的な絞り込み入門）
← TypeScript Academyに戻る