交差型を活用して複数の型をマージする

TypeScriptにおいて、交差型は複数の型を1つに組み合わせることができる強力な機能です。これは、より複雑なデータ構造の作成やコードの型安全性の向上に特に役立ちます。この記事では、交差型の使用方法、その有用性、そして使用例を詳しく見ていきます。

交差型とは？

TypeScriptの交差型は、複数の型を1つにマージすることができる機能です。結果として得られる型は、組み合わされた型のすべてのプロパティを持ちます。例えば、AとBという2つの型がある場合、A & Bという型はAとBの両方のプロパティを含みます。つまり、型が有効であるためには、すべてのプロパティを満たす必要があります。

構文

交差型の基本構文は&記号を使用します：

typescript

この例では、Cはstring型のpropAとnumber型のpropBの両方を持つ型です。型Cの変数は、これらのプロパティを両方とも持つ必要があります。

なぜ交差型を使用するのか？

交差型は、異なる型の機能を組み合わせたい場合に便利です。特に以下のような場合に有用です：

• インターフェースの結合: 複数のインターフェースから継承したいとき
• コードの柔軟性向上: 毎回新しい特定の型を作成する代わりに、再利用可能な型を組み合わせることができます
• 型安全性の向上: 複数の基準を満たす必要がある型を定義することで、型関連のエラーのリスクを減らせます

例1：2つの単純な型のマージ

メンバーと管理者の両方の特性を持つユーザーを定義する必要があるアプリケーションを開発していると想像してください：

typescript

この例では、SuperUserはMemberとAdminの両方のプロパティを持ちます。つまり、userが有効であるためには、これらのプロパティをすべて持つ必要があります。

ユニオン型との組み合わせ

交差型は、ユニオン型と組み合わせるとさらに強力になります。これにより、複数の基準を同時に満たす必要がある条件付き型を定義できます：

typescript

この場合、NotificationはEmailNotificationまたはSMSNotificationのどちらかであり、かつsentAtプロパティを持つ必要があります。

例2：動的な交差型の作成

商品情報と在庫情報を組み合わせてInventoryItemを形成する例：

typescript

交差型の制限事項と注意点

交差型は非常に便利ですが、同じ名前で異なる型のプロパティがある場合、TypeScriptはエラーを生成します：

typescript

結論

交差型は、TypeScriptの型を豊かにする優れたツールです。データ構造のマージ、共通機能の追加、より精密な型の作成を可能にします。複雑なエンティティや特定のユースケースの作成において、交差型は柔軟性を高めてくれます。

このアプローチをTypeScriptコードに取り入れて、プロジェクトのセキュリティと保守性を強化してみましょう！

1type A = { propA: string };
2type B = { propB: number };
3type C = A & B;

1type Member = {
2  id: number;
3  name: string;
4  memberSince: Date;
5};
6
7type Admin = {
8  adminLevel: number;
9  permissions: string[];
10};
11
12type SuperUser = Member & Admin;
13
14const user: SuperUser = {
15  id: 1,
16  name: 'Alice',
17  memberSince: new Date('2020-01-01'),
18  adminLevel: 3,
19  permissions: ['read', 'write', 'delete'],
20};

1type EmailNotification = {
2  type: 'email';
3  email: string;
4  subject: string;
5};
6
7type SMSNotification = {
8  type: 'sms';
9  phoneNumber: string;
10  message: string;
11};
12
13type Notification = (EmailNotification | SMSNotification) & { sentAt: Date };
14
15const notification: Notification = {
16  type: 'email',
17  email: 'example@example.com',
18  subject: 'Hello World!',
19  sentAt: new Date(),
20};

1type Product = {
2  id: string;
3  name: string;
4  price: number;
5};
6
7type Inventory = {
8  quantity: number;
9  location: string;
10};
11
12type InventoryItem = Product & Inventory;
13
14const item: InventoryItem = {
15  id: '123',
16  name: 'Laptop',
17  price: 1299.99,
18  quantity: 30,
19  location: 'Warehouse A',
20};

1type A = { id: number };
2type B = { id: string };
3
4type C = A & B; // エラー: 'id'は'number'と'string'の両方になることはできません