【TypeScript】setInterval()がTimer型で型エラーが起きてしまう問題について解説します。

なやむくん

setInterval()の返り値を代入している変数をnumber型にしているのに型エラーが起きる…。

などの疑問や悩みを解決してまいります。

なやむさん

setInterval()の返り値ってnumber型なんですか？

みつた

はい。setInterval()はそれぞれが識別できるようにタイマーIDを持っています。なので返り値はnumber型なのですが、ある条件下で使用した場合は型が変化するんです。

今回の記事では、返り値がnumber型のsetInterval()でnumber型を指定しているにもかかわらずなぜ型エラーが起きてしまうのか、その問題について解説していきます。

setInterval()の返り値はnumber型？

まず初めに、setInterval()の返り値がnumber型なのかどうかについて解説します。

const intervalId = setInterval(() => {
  console.log('Hello every second');
}, 1000);

console.log(intervalId); // 0以外の整数がコンソールに表示される

上記のコードで定数intervalIdの中身をコンソールに出力してみると、0以外の整数が表示されたかと思います。

これはsetInterval()が持つタイマーIDで、setInterval()が複数使用されることがある場合は、このタイマーIDでそれぞれのタイマーを識別しています。

setInterval()は指定した時間ごとに繰り返し処理を実行しますが、処理を中断させるためにclearInterval()を使用します。

このclearInterval()の引数にタイマーIDを渡してあげることで、渡されたタイマーIDを持つsetInterval()の処理を中断させることができています。

const intervalId = setInterval(() => {
  console.log('Hello every second');
  clearInterval(intervalId);
}, 1000);

console.log(intervalId); // 1回処理が実行されたら処理が中断される

よろこびくん

なるほど。そのような仕組みで処理を中断させていたんですね！

みつた

はい、なのでsetInterval()の返り値がタイマーIDの整数なので、number型と言われています。

型指定をnumber型としているがエラーが発生する問題

以下のコードを用意しました。

let hoge: number;

hoge = setInterval(
  () => console.log(hoge),
  1000
);

先の返り値の解説でsetInterval()は本来0ではない正の整数の値を返すことが分かったと思います。

そのため変数hogeにはnumber型を指定しており、一見問題なさそうなコードなのですが、ある条件下でsetInterval()の値を代入しようとする変数hogeに対して以下のエラーがします。

let hoge: number;

hoge = setInterval(
  () => console.log(hoge),
  1000
);

// 型 'Timer' を型 'number' に割り当てることはできません。
// Type 'Timer' is not assignable to type 'number'.

このように「型 Timerを型 numberに割り当てることはできません。」と怒られてしまいます。

なやむくん

なぜTimer型がでてくるのでしょうか…？

原因：Node.js環境でsetInterval()を使用しているため

Node.js環境だとsetInterval()やsetTimeout()の返り値が、NodeJS.Timer型となります。

そのためnumber型を割り当てるとエラーが起きてしまいます。

解決策①：window.setInterval()とする

window オブジェクトにある setInterval() の返り値の型は number となっているため、setInterval()の先頭にwindow.を追記します。

let hoge: number;

hoge = window.setInterval(
  () => console.log(hoge),
  1000
);

このように記述することで変数hogeの型がnumber型となるのでエラーが改善されます。

解決策②：Number() でsetInterval()の処理を囲む

Number関数を使用することで、引数に渡された値をnumber型に変換することができます。

let hoge: number;

hoge = Number(setInterval(() => console.log(hoge), 1000));

このようにすることで、setInterval()の返り値をnumber型に変換することができるためエラーを解消することができます。

まとめ

ここまで読んでいただきありがとうございました。

今回の記事のまとめです。