TypeScriptでジェネリック型と型パラメータを理解する
TypeScript で複数の型のメンバーを組み合わせる
TypeScript では、型システムを利用して、変数や関数の型を厳密に定義することができます。これは、コードの安全性と信頼性を向上させるのに役立ちます。
複数の型のメンバーを組み合わせる
TypeScript では、複数の型のメンバーを組み合わせて、新しい型を作成することができます。これを行うには、2つの主要な方法があります。
- 交差型（Intersection Types）
- ユニオン型（Union Types）
交差型は、2つ以上の型のすべてのメンバーを持つ新しい型を作成します。構文は次のとおりです。
type MyType = Type1 & Type2;
この例では、MyType は Type1 と Type2 のすべてのメンバーを持つ型になります。
例:
interface Person {
name: string;
}
interface Address {
street: string;
city: string;
}
type PersonWithAddress = Person & Address;
const person: PersonWithAddress = {
name: "John Doe",
street: "123 Main St",
city: "Anytown"
};
この例では、PersonWithAddress は Person と Address のすべてのメンバーを持つ型になります。つまり、person 変数は name と street および city プロパティを持つことができます。
ユニオン型は、変数が複数の型のうちのいずれかの型を持つことができることを示します。構文は次のとおりです。
type MyType = Type1 | Type2;
type Shape = Circle | Rectangle;
interface Circle {
radius: number;
}
interface Rectangle {
width: number;
height: number;
}
const shape: Shape = { radius: 5 };
if (shape.radius) {
console.log("円です。半径は", shape.radius, "です。");
} else {
console.log("長方形です。幅は", shape.width, "高さは", shape.height, "です。");
}
この例では、shape 変数は Circle または Rectangle のいずれかの型を持つことができます。shape.radius が存在する場合は、shape は円であることがわかり、その半径を出力します。そうでない場合は、shape は長方形であることがわかり、その幅と高さを出力します。
上記以外にも、ジェネリック型や型パラメータを使用して、複数の型のメンバーを組み合わせる方法があります。これらの方法は、より複雑な型を作成するために使用できますが、ここでは説明しません。
TypeScript では、交差型とユニオン型を使用して、複数の型のメンバーを組み合わせて新しい型を作成することができます。これにより、コードをより明確かつ簡潔に記述し、型の安全性と信頼性を向上させることができます。
interface Person {
name: string;
age: number;
}
interface Address {
street: string;
city: string;
}
type PersonWithAddress = Person & Address;
const person: PersonWithAddress = {
name: "John Doe",
age: 30,
street: "123 Main St",
city: "Anytown"
};
console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(person.street); // 123 Main St
console.log(person.city); // Anytown
ユニオン型
type Shape = Circle | Rectangle;
interface Circle {
radius: number;
}
interface Rectangle {
width: number;
height: number;
}
const shape: Shape = { radius: 5 };
if (shape.radius) {
console.log("円です。半径は", shape.radius, "です。");
} else {
console.log("長方形です。幅は", shape.width, "高さは", shape.height, "です。");
}
このサンプルコードでは、交差型とユニオン型の両方の使用方法を示しています。
交差型
最初の例では、Person と Address インターフェースを組み合わせて PersonWithAddress 型を作成します。これにより、person 変数は name と age プロパティに加えて street と city プロパティを持つことができます。
これらのサンプルコードは、交差型とユニオン型の基本的な使用方法を示すものです。これらの型をより複雑な方法で組み合わせることもできます。
- ジェネリック型を使用して、複数の型のメンバーを組み合わせる
- 型エイリアスを使用して、交差型とユニオン型の組み合わせを定義する
これらの例は、より高度な TypeScript 開発者向けです。
TypeScriptで複数の型のメンバーを組み合わせるその他の方法
ジェネリック型は、型パラメータを使用して、さまざまな型の値を受け入れることができる型を作成する方法です。これにより、コードをより汎用化し、繰り返しを避けることができます。
interface Box<T> {
value: T;
}
const stringBox: Box<string> = { value: "Hello" };
const numberBox: Box<number> = { value: 10 };
この例では、Box というジェネリック型を定義しています。この型は、value というプロパティを持つオブジェクトを表します。value プロパティの型は、ジェネリック型パラメータ T で指定されます。つまり、Box 型は、任意の型 T の値を持つことができます。
型パラメータは、ジェネリック型で使用されるプレースホルダです。実際の型値は、ジェネリック型が使用される際に指定されます。
function swap<T>(a: T, b: T): [T, T] {
return [b, a];
}
const swappedNumbers = swap(10, 20);
const swappedStrings = swap("Hello", "World");
この例では、swap というジェネリック関数を作成しています。この関数は、2つの値を受け取り、それらを入れ替えます。関数の型パラメータ T は、値の型を表します。つまり、swap 関数は、任意の型の値を受け入れることができます。
型エイリアスは、既存の型に新しい名前を付けるための方法です。これにより、コードをより読みやすく、理解しやすくすることができます。
type Person = {
name: string;
age: number;
};
const john: Person = {
name: "John Doe",
age: 30
};
この例では、Person という型エイリアスを定義しています。このエイリアスは、name と age というプロパティを持つオブジェクトを表します。john 変数は Person 型であるため、name と age プロパティにアクセスすることができます。
上記以外にも、TypeScript で複数の型のメンバーを組み合わせる方法はいくつかあります。以下に、いくつかの例を紹介します。
- 条件付き型
- 分岐型
- 型ガード
TypeScript には、複数の型のメンバーを組み合わせるためのさまざまな方法があります。これらの方法を理解することで、より柔軟で再利用可能なコードを書くことができます。
ご参考になりましたでしょうか？
javascript typescript interface
