TypeScript: 関数パラメータの型指定のベストプラクティス
TypeScriptにおける強力な型を持つ関数パラメータ
強力な型を持つ関数パラメータの例
次のコードは、addという名前の関数と、2つの数値を受け取り、合計を返す関数です。
function add(x: number, y: number): number {
return x + y;
}
この例では、xとyパラメータはnumber型に設定されています。これは、これらのパラメータが数値である必要があることを意味します。
強力な型を持つ関数パラメータを使用する利点は次のとおりです。
- コードの安全性: 型システムは、誤った型の値が関数に渡されるのを防ぐのに役立ちます。
- コードの信頼性: 型システムは、関数が常に期待される出力を返すことを保証するのに役立ちます。
- コードの理解: 型システムは、関数の動作を理解しやすくなります。
強力な型を持つ関数パラメータは、さまざまな状況で使用できます。
- データの検証: 関数パラメータを使用して、データが有効であることを確認できます。
- コードの再利用: 強力な型を持つ関数パラメータは、コードをより汎用的にすることができます。
TypeScriptで関数パラメータに強力な型を使用することは、コードの安全性、信頼性、理解性を向上させるための優れた方法です。
基本的な例
function add(x: number, y: number): number {
return x + y;
}
// 呼び出し例
const result = add(1, 2); // result は 3 になる
// 型エラーになる例
add("1", 2); // 型 'string' は 'number' に割り当てることができません
型エイリアスの使用
type NumPair = {
x: number;
y: number;
};
function addPair(pair: NumPair): number {
return pair.x + pair.y;
}
// 呼び出し例
const pair: NumPair = { x: 1, y: 2 };
const result = addPair(pair); // result は 3 になる
この例では、NumPairという型エイリアスを作成し、xとyという2つのnumber型プロパティを持つオブジェクトを表します。addPair関数はNumPair型のオブジェクトを受け取り、2つのプロパティの合計を返します。
ジェネリック型の使用
function addNumbers<T extends number>(x: T, y: T): T {
return x + y;
}
// 呼び出し例
const result1 = addNumbers(1, 2); // result1 は 3 になる
const result2 = addNumbers(1.2, 3.4); // result2 は 4.6 になる
この例では、addNumbersというジェネリック関数を作成し、Tという型パラメータを受け取ります。Tは数値型である必要があります。この関数は、2つのT型の値を受け取り、合計を返します。
デフォルト引数の使用
function addNumbers(x: number, y: number = 1): number {
return x + y;
}
// 呼び出し例
const result1 = addNumbers(1, 2); // result1 は 3 になる
const result2 = addNumbers(1); // result2 は 2 になる
この例では、addNumbers関数にyパラメータにデフォルト値1を設定しました。yパラメータが指定されない場合は、デフォルト値が使用されます。
オプションパラメータの使用
function addNumbers(x: number, y?: number): number {
if (y === undefined) {
return x;
}
return x + y;
}
// 呼び出し例
const result1 = addNumbers(1, 2); // result1 は 3 になる
const result2 = addNumbers(1); // result2 は 1 になる
これらのサンプルコードは、TypeScriptで強力な型を持つ関数パラメータを使用するためのいくつかの例です。これらの機能を理解することで、より安全で信頼性が高く、理解しやすいコードを書くことができます。
強力な型を持つ関数パラメータを指定する他の方法
インデックスシグネチャ
interface Person {
name: string;
age: number;
}
function getPersonInfo(person: Person): string {
return `${person.name} is ${person.age} years old.`;
}
// 呼び出し例
const person: Person = { name: "John Doe", age: 30 };
const info = getPersonInfo(person); // info は "John Doe is 30 years old." になる
この例では、Personというインターフェースを作成し、nameとageという2つのプロパティを持つオブジェクトを表します。getPersonInfo関数はPerson型のオブジェクトを受け取り、オブジェクトのプロパティを使用して文字列を返します。
クラス
class Person {
constructor(public name: string, public age: number) {}
getInfo(): string {
return `${this.name} is ${this.age} years old.`;
}
}
// 呼び出し例
const person = new Person("John Doe", 30);
const info = person.getInfo(); // info は "John Doe is 30 years old." になる
ユーティリティ型
type Required<T> = {
[P in keyof T]-?: T[P];
};
interface Person {
name?: string;
age?: number;
}
function getPersonInfo(person: Required<Person>): string {
return `${person.name} is ${person.age} years old.`;
}
// 呼び出し例
const person: Person = { name: "John Doe" };
const info = getPersonInfo(person); // info は "John Doe is undefined years old." になる
これらの方法は、特定の状況で役立つ可能性があります。どの方法を使用するかは、コードの要件によって異なります。
typescript
