Union型とIntersection型
複数の型を組み合わせて扱います
「Union型とIntersection型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ユニオン型とインターセクション型
ユニオン型とインターセクション型
次のレッスンへようこそ！このレッスンでは、ユニオン型を使って変数に複数の候補となる型を指定する方法と、インターセクション型を使って複数の型を1つに組み合わせる方法を学びます。これらは、柔軟で堅牢なコードを作成するための強力なツールです。それでは始めましょう！
ユニオン型とは
ユニオン型とは
ユニオン型を使うと、変数に複数の型の値を格納できます。|記号を使ってユニオン型を定義できます。
例: string または number のどちらかを格納できる変数:
課題: ユニオン型の変数を宣言し、異なる値を代入してください。
let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"
value = 42;
console.log(value); // Output: 42
関数でユニオン型を使う
関数でユニオン型を使う
関数のパラメーターにユニオン型を使うと、複数の入力型に対応できます。例:
課題: ユニオン型のパラメーターを受け取り、その値を console に出力する関数を作成してください。
function printValue(value: string | number): void {
console.log(`The value is ${value}`);
}
printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100
インターセクション型とは
インターセクション型とは
インターセクション型は、複数の型を1つに組み合わせます。&記号を使ってインターセクション型を定義できます。
例: 2つのオブジェクト型を組み合わせる:
課題: 2つのオブジェクトを組み合わせるインターセクション型を作成し、使用してください。
type Person = { name: string };
type Employee = { employeeId: number };
type Staff = Person & Employee;
let staffMember: Staff = {
name: "Alice",
employeeId: 123,
};
console.log(staffMember);
ユニオン型で型ガードを使う
ユニオン型で型ガードを使う
TypeScriptは、ユニオン型でどの型を使用しているかを判断できません。型ガードを使って型を絞り込めます。例:
課題: 型ガードを使って、ユニオン型に含まれる異なる型を処理してください。
function display(value: string | number): void {
if (typeof value === "string") {
console.log(`String value: ${value.toUpperCase()}`);
} else {
console.log(`Number value: ${value * 2}`);
}
}
display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10
インターセクション型の実践
インターセクション型の実践
インターセクション型は、共通のプロパティを持つオブジェクトを扱うときに便利です。例:
課題: admin と user のロール用のインターセクション型を作成してください。
type Admin = { adminLevel: string };
type User = { username: string };
type AdminUser = Admin & User;
let admin: AdminUser = {
adminLevel: "super",
username: "admin123",
};
console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);
ユニオン型とインターセクション型でよくあるミス
ユニオン型とインターセクション型でよくあるミス
よくあるミスを確認しましょう。
- ユニオン型を使っているのに、考えられるすべてのケースを処理していない（型ガードを使い忘れるなど）。
- 不要なインターセクションを使って、型を複雑にしすぎる。
- ユニオン型またはインターセクション型に、互換性のない値を代入する。
ヒント: 型が想定どおりに機能することを確認するため、必ずコードをテストしてください！
ユニオン型とインターセクション型を使う場面
ユニオン型とインターセクション型を使う場面
次のような場合はユニオン型を使います。
- 変数に、複数の候補となる型のいずれかを指定できる場合。
- 関数のパラメーターに柔軟性が必要な場合。
次のような場合はインターセクション型を使います。
- 複数のオブジェクトや型を1つに組み合わせる場合。
- 特定の用途に合わせて、より複雑な型を作成する場合。
type A = { x: number };
type B = { y: number };
type AB = A & B;
let obj: AB = { x: 5, y: 10 };
よくできました！
よくできました！
おめでとうございます！TypeScriptでユニオン型とインターセクション型を使って、複雑な状況に対応する方法を学びました。これらのツールを使うと、コードをより柔軟で表現力の高いものにできます。次のレッスンでは、enumと、定数値の管理に役立つ仕組みについて学びます。引き続きコーディングしていきましょう！
よくある質問
「Union型とIntersection型」レッスンは無料ですか？
はい。「Union型とIntersection型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Union型とIntersection型」で何を学びますか？
複数の型を組み合わせて扱います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Union型とIntersection型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。