0Pricing
TypeScript Academy · レッスン

Intersection TypesとUnion Types

Intersection Typesで複数の型を1つに結合し、Union Typesで柔軟な型の選択肢を作る方法を学びます。

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

交差型とユニオン型の概要

交差型とユニオン型の概要

TypeScriptの交差型とユニオン型を使うと、型を組み合わせたり、柔軟な型を作成したりできます。これにより、複雑なデータ構造を定義するための強力な方法が得られます。

Intersection TypesとUnion Types — イラスト1

ユニオン型とは

ユニオン型とは

ユニオン型を使うと、値が複数の型のいずれかになります。|演算子を使ってユニオン型を定義できます。

ユニオン型の例

ユニオン型の例

ユニオン型の使用例を見てみましょう。

type Status = 'active' | 'inactive' | 'suspended';

let userStatus: Status;
userStatus = 'active'; // Valid
userStatus = 'pending'; // Error

交差型とは

交差型とは

交差型は複数の型を1つにまとめたもので、結合後の型には、交差させたすべての型のプロパティが必要になります。

交差型の例

交差型の例

交差型の使用例を見てみましょう。

type User = {
  name: string;
  email: string;
};

type Admin = {
  role: string;
};

type AdminUser = User & Admin;

const admin: AdminUser = {
  name: 'Alice',
  email: 'alice@example.com',
  role: 'admin'
};

ユニオン型と交差型の違い

ユニオン型と交差型の違い

ユニオン型では値が複数の型のいずれかになります。一方、交差型では複数の型を1つにまとめるため、すべてのプロパティが存在する必要があります。

実践的な使用例

実践的な使用例

ユニオン型は複数の入力型を扱うのに適しており、交差型は複数の役割や機能を1つの型にまとめるのに適しています。

練習課題

練習課題

交差型を使って、Product型とDiscount型を組み合わせた型を作成してください。その型を使って変数を宣言しましょう。

ユニオン型と交差型の復習

おめでとうございます!

TypeScriptで柔軟な型や複合的な型を定義するための、ユニオン型と交差型の使い方を学びました。これらの概念を練習して、コードの堅牢性と型安全性を高めましょう。

Intersection TypesとUnion Types — イラスト10

よくある質問

「Intersection TypesとUnion Types」レッスンは無料ですか?

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

「Intersection TypesとUnion Types」で何を学びますか?

Intersection Typesで複数の型を1つに結合し、Union Typesで柔軟な型の選択肢を作る方法を学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Intersection TypesとUnion Types」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. KeyofとLookup Types
  2. Mapped Types
  3. Intersection TypesとUnion Types
← TypeScript Academyに戻る