TypeScript 関数コールバック型定義
2024-09-01
TypeScriptで関数コールバックの型を定義する方法
TypeScriptでは、関数の引数として渡されるコールバック関数の型を明確に定義することができます。これにより、コードの可読性と安全性を向上させることができます。
関数型インターフェイスの定義
最も一般的な方法は、関数型インターフェイスを定義することです。このインターフェイスは、コールバック関数の引数と戻り値の型を指定します。
interface CallbackFunction {
(arg1: Type1, arg2: Type2): ReturnType;
}
- ReturnType
コールバック関数の戻り値の型 - arg1、arg2
コールバック関数の引数の型
関数の引数にインターフェイスを適用
定義したインターフェイスを関数の引数に適用します。
function myFunction(callback: CallbackFunction) {
// ...
}
コールバック関数の使用
関数を呼び出す際に、定義されたインターフェイスに準拠したコールバック関数を渡します。
myFunction((arg1, arg2) => {
// ...
});
例
interface GreetingCallback {
(name: string): void;
}
function greet(callback: GreetingCallback) {
callback("Alice");
}
greet((name) => {
console.log("Hello, " + name);
});
汎用型 (Generic) の使用
より柔軟な型定義が必要な場合は、汎用型を使用することができます。
interface CallbackFunction<T, U> {
(arg: T): U;
}
function myGenericFunction<T, U>(callback: CallbackFunction<T, U>) {
// ...
}
基本的な例
interface GreetingCallback {
(name: string): void;
}
function greet(callback: GreetingCallback) {
callback("Alice");
}
greet((name) => {
console.log("Hello, " + name);
});
- コールバック関数の使用
greet関数を呼び出す際に、GreetingCallbackインターフェイスに準拠したコールバック関数を渡します。 - callback
greet関数の引数で、GreetingCallbackインターフェイスに準拠する関数型。 - greet
コールバック関数を引数として受け取る関数。 - GreetingCallback
コールバック関数の型を定義するインターフェイス。
汎用型 (Generic) を使用した例
interface CallbackFunction<T, U> {
(arg: T): U;
}
function myGenericFunction<T, U>(callback: CallbackFunction<T, U>) {
// ...
}
myGenericFunction((arg: number) => {
return arg * 2;
});
- コールバック関数の使用
myGenericFunctionを呼び出す際に、CallbackFunctionインターフェイスに準拠したコールバック関数を渡します。 - myGenericFunction
汎用型を使用する関数。 - CallbackFunction
汎用型を使用して、引数と戻り値の型を柔軟に定義するインターフェイス。
オプションの引数を持つコールバック関数
interface GreetingCallback {
(name: string, greeting?: string): void;
}
function greet(callback: GreetingCallback) {
callback("Alice", "こんにちは");
}
- コールバック関数の使用
greet関数を呼び出す際に、オプションの引数を渡すことができます。 - GreetingCallback
オプションの引数greetingを持つコールバック関数の型を定義するインターフェイス。
interface CalculationCallback {
(num1: number, num2: number): number;
}
function calculate(callback: CalculationCallback) {
return callback(10, 5);
}
- コールバック関数の使用
calculate関数を呼び出す際に、複数の引数を渡します。 - CalculationCallback
複数の引数を持つコールバック関数の型を定義するインターフェイス。
インライン型注釈
関数型を直接関数の引数に注釈することができます。
function greet(callback: (name: string) => void) {
callback("Alice");
}
型推論
TypeScriptは多くの場合、型を推論することができます。
function greet(callback) {
callback("Alice");
}
greet((name) => {
console.log("Hello, " + name);
});
汎用型関数
汎用型関数を使用して、より柔軟な型定義を行うことができます。
function myGenericFunction<T, U>(callback: (arg: T) => U) {
// ...
}
インターフェイスの継承
インターフェイスを継承して、共通の型を定義することができます。
interface GreetingCallback {
(name: string): void;
}
interface ExtendedGreetingCallback extends GreetingCallback {
(name: string, greeting?: string): void;
}
型ガード
型ガードを使用して、関数の引数の型を判定することができます。
function greet(callback: (name: string) => void | (name: string, greeting: string) => void) {
if (callback.length === 2) {
callback("Alice", "こんにちは");
} else {
callback("Alice");
}
}
型アサーション
型アサーションを使用して、型を強制的に指定することができます。
function greet(callback: any) {
const typedCallback = callback as (name: string) => void;
typedCallback("Alice");
}
typescript
