TypeScriptで正しいsetTimeoutを使用する: Node.jsとブラウザの違い
2024-09-28
TypeScriptでsetTimeoutを使用する際に、Node.jsとブラウザ環境の違いを考慮する必要があります。両環境ではsetTimeoutの型定義が異なるため、適切な型を指定してエラーを防ぐことが重要です。
Node.js環境
Node.jsでは、setTimeoutの型は以下のように定義されています。
declare function setTimeout(callback: (...args: any[]) => void, ms?: number, ...args: any[]): NodeJS.Timeout;
- 戻り値
NodeJS.Timeoutオブジェクト。このオブジェクトを使用してタイマーをクリアすることができます。 ...args:callback関数に渡される引数。ms: 遅延時間（ミリ秒）。callback: 遅延後に実行される関数。
ブラウザ環境
declare function setTimeout(handler: (...args: any[]) => void, timeout?: number, ...args: any[]): number;
- 戻り値
タイマーのID。このIDを使用してタイマーをクリアすることができます。 timeout: 遅延時間（ミリ秒）。handler: 遅延後に実行される関数。
適切な型指定
Node.jsとブラウザ環境でsetTimeoutを使用する際には、それぞれの型定義に合わせて適切な型を指定する必要があります。
import { setTimeout } from 'node:timers';
const timeoutId = setTimeout(() => {
console.log('Hello from Node.js!');
}, 2000);
// タイマーをクリア
clearTimeout(timeoutId);
ブラウザ
const timeoutId = setTimeout(() => {
console.log('Hello from browser!');
}, 2000);
// タイマーをクリア
clearTimeout(timeoutId);
注意
- ブラウザ環境では、グローバルスコープで
setTimeoutが定義されています。 - Node.js環境では、
node:timersモジュールからsetTimeoutをインポートする必要があります。
import { setTimeout } from 'node:timers';
// 2秒後にメッセージを表示
const timeoutId = setTimeout(() => {
console.log('Hello from Node.js!');
}, 2000);
// 5秒後にタイマーをクリア
setTimeout(() => {
clearTimeout(timeoutId);
console.log('Timer cleared.');
}, 5000);
解説
node:timersモジュールからsetTimeoutをインポートします。setTimeoutを使用して、2秒後にメッセージを表示するタイマーを設定します。setTimeoutを使用して、5秒後にclearTimeoutでタイマーをクリアします。
// 2秒後にメッセージを表示
const timeoutId = setTimeout(() => {
console.log('Hello from browser!');
}, 2000);
// 5秒後にタイマーをクリア
setTimeout(() => {
clearTimeout(timeoutId);
console.log('Timer cleared.');
}, 5000);
- ブラウザ環境では、
setTimeoutがグローバルスコープで定義されているため、インポートは不要です。
共通点
clearTimeoutを使用してタイマーをクリアすることができます。- 両環境で
setTimeoutの使い方は基本的には同じです。
import { setInterval } from 'node:timers';
let count = 0;
const intervalId = setInterval(() => {
console.log('Count:', count++);
if (count === 5) {
clearInterval(intervalId);
}
}, 1000);
clearIntervalを使用して間隔をクリアします。setIntervalは指定した間隔で繰り返し関数を呼び出します。
Promiseを使用
const delay = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
delay(2000)
.then(() => console.log('Hello from Node.js!'))
.catch(error => console.error(error));
setTimeoutを内部で使用して遅延を実現します。Promiseを使用して非同期処理を管理します。
let count = 0;
const intervalId = setInterval(() => {
console.log('Count:', count++);
if (count === 5) {
clearInterval(intervalId);
}
}, 1000);
- ブラウザ環境でも
setIntervalは同じように使用できます。
const delay = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
delay(2000)
.then(() => console.log('Hello from browser!'))
.catch(error => console.error(error));
- ブラウザ環境でも
Promiseは同じように使用できます。
- Node.jsとブラウザ環境でこれらの代替方法を使用することができます。
Promiseは非同期処理を管理する際に便利です。setIntervalは繰り返し処理に適しています。
typescript settimeout
