TypeScriptのsetTimeout戻り値について
2024-10-22
setTimeout関数の戻り型
setTimeout関数は、非同期的にコードを実行するタイマーを設定し、そのタイマーのIDを返します。このIDは、タイマーをクリアするために使用されます。
TypeScriptでは、setTimeout関数の戻り型は number 型です。これは、タイマーのIDが数値であるためです。
例
const timeoutId: number = setTimeout(() => {
console.log("Hello, world!");
}, 2000); // 2秒後に実行
このコードでは、setTimeout関数の戻り型を timeoutId 変数に保存しています。この変数を使用して、タイマーをクリアすることができます。
タイマーのクリア
clearTimeout関数を使用して、タイマーをクリアすることができます。この関数には、タイマーのIDを渡す必要があります。
clearTimeout(timeoutId);
このコードは、timeoutId で指定されたタイマーをクリアします。これにより、タイマーが設定されたコードは実行されなくなります。
TypeScriptにおけるsetTimeout関数の戻り型と例
const timeoutId: number = setTimeout(() => {
console.log("Hello, world!");
}, 2000); // 2秒後に実行
解説
- setTimeout関数の呼び出し
setTimeout関数にコールバック関数と遅延時間を渡します。- コールバック関数は、指定された遅延時間後に実行されます。
- 遅延時間はミリ秒単位で指定します。
- 戻り型の保存
setTimeout関数の戻り値をtimeoutId変数に保存します。- この変数は、タイマーのIDを表します。
clearTimeout(timeoutId);
- これにより、タイマーが設定されたコードは実行されなくなります。
clearTimeout関数にtimeoutIdを渡すことで、そのタイマーをクリアします。
setTimeout関数以外にも、非同期処理を実現する方法があります。
Promise
Promiseは、非同期操作の結果を管理するためのオブジェクトです。setTimeout関数を使用してPromiseを作成し、その結果を処理することができます。
function delay(ms: number): Promise<void> {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
delay(2000).then(() => {
console.log("2秒後に実行されます");
});
async/await
async/awaitは、Promiseをより同期的なスタイルで扱うための構文糖衣です。
async function delay(ms: number) {
await new Promise((resolve) => setTimeout(resolve, ms));
console.log("2秒後に実行されます");
}
delay(2000);
RxJS
RxJSは、リアクティブプログラミングのためのライブラリです。Observableを使用して、非同期イベントを扱うことができます。
import { fromEvent, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
const click$ = fromEvent(document, 'click');
const interval$ = interval(1000);
click$.pipe(
map(() => interval$),
take(5)
).subscribe(console.log);
typescript
