TypeScript パイプの意味
2024-10-29
TypeScriptにおいて、パイプ（|）記号はユニオン型を表します。ユニオン型とは、複数の型からなる型であり、変数に割り当てることができる値の型が、その複数の型のいずれかであることを示します。
例
let value: string | number;
value = "hello"; // 文字列として割り当て可能
value = 42; // 数値として割り当て可能
この例では、value変数はstring型またはnumber型のいずれかを取ることができます。
ユニオン型の利点
- 関数のパラメータや戻り値の型指定
関数のパラメータや戻り値の型をユニオン型にすることで、異なる型の入出力に対応できます。 - 条件分岐の簡略化
ユニオン型の変数を条件分岐でチェックすることで、異なる型に応じた処理を柔軟に行えます。 - 柔軟性
さまざまな種類の値を一つの変数に格納できます。
注意
- ユニオン型の変数に対して操作を行う際には、その変数の実際の型を考慮した適切な処理が必要です。TypeScriptの型チェック機能を活用して、安全なコードを書くようにしましょう。
- ユニオン型の変数に値を代入する際には、その値がユニオン型に含まれるいずれかの型である必要があります。
// ユニオン型の宣言
let value: string | number;
// 値の代入
value = "Hello, TypeScript!"; // 文字列として代入
value = 42; // 数値として代入
// 条件分岐による型チェックと処理
if (typeof value === 'string') {
console.log(value.toUpperCase()); // 文字列として処理
} else if (typeof value === 'number') {
console.log(value * 2); // 数値として処理
}
関数のパラメータと戻り値のユニオン型
function greet(name: string | number): string {
if (typeof name === 'string') {
return `Hello, ${name}!`;
} else {
return `Hello, user ${name}`;
}
}
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet(123)); // "Hello, user 123"
型ガードによる型絞り込み
function processValue(value: string | number) {
if (typeof value === 'string') {
// valueは確実にstring型
console.log(value.length);
} else {
// valueは確実にnumber型
console.log(value * 2);
}
}
- 型ガードやTypeScriptの型推論機能を適切に活用して、安全なコードを書くことが重要です。
- ユニオン型は柔軟性がありますが、誤った型操作をするとエラーが発生する可能性があります。
インターセクション型
インターセクション型は、複数の型を組み合わせ、そのすべてのプロパティを持つ新しい型を定義します。&記号を用います。
interface Person {
name: string;
age: number;
}
interface Address {
street: string;
city: string;
}
type PersonWithAddress = Person & Address;
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
ジェネリック型
ジェネリック型は、型パラメータを用いて、再利用可能な型定義を作成します。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // type of output will be 'string'
let output2 = identity<num ber>(100); // type of output2 will be 'number'
型アサーション
型アサーションは、TypeScriptの型チェッカーに、特定の変数が特定の型であると明示的に伝える方法です。ただし、誤った型アサーションは実行時エラーにつながる可能性があります。
let maybeNumber: string | number = "10";
let numberValue: number = maybeNumber as number; // 型アサーション
- 型アサーションは慎重に使用し、可能な限り型推論や型ガードを活用することを推奨します。
- ただし、これらの機能を誤用すると、型安全性が低下し、バグの原因となる可能性があります。
- インターセクション型、ジェネリック型、型アサーションは、適切な場面で使用することでコードの柔軟性と再利用性を向上させることができます。
typescript
