はじめに
実務でsetTimeoutを使うことになりました。
かなりTypeScriptの型推論に振り回されたので、共有したいと思います。
自己紹介
私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
結論
setTimeoutの型注釈は以下のように書く。
const timeoutId = useRef<ReturnType<typeof setTimeout>>();
具体例で説明
背景
ある条件を満たした時に、フラッシュメッセージを表示するという実装を行う。
まずは表示するロジックを作りたい。
10秒後に消すという要件を満たすために、初めてsetTimeoutを使うことになった。
要件
- フラッシュメッセージを表示する
- 表示したフラッシュメッセージは10秒後に消す
設計
- フラッシュメッセージの表示ロジック
- 表示状態を表すstateを定義（boolean）
- 10秒後に消す
-
setTimeout使う -
timeoutIDをrefに入れて管理する
-
問題
以下、私が書いたソースコードです。
const [showFlashMessage, setShowFlashMessage] = useState(false);
const timeoutIdRef = useRef<number>();
// フラッシュメッセージを表示
setShowFlashMessage(true);
// 10秒後に非表示にする
timeoutIdRef.current = setTimeout(() => {
setShowFlashMessage(false);
}, 10000);
まずは表示状態を表すstateを宣言しました。
そして条件を満たした時に、setShowFlashMessageでstateをtrueに切り替えて表示します。
次に、setTimeoutを使って、10秒（=10000ミリ秒）後に非表示にするようにstateをfalseに切り替えて、非表示にします。
timeoutIDは設計通り、refに入れています。
返される timeoutID は正の整数値なので、型はnumberとしました。
しかし、ここでTypeScriptのエラーが出ました。
型 'Timeout' を型 'number' に割り当てることはできません。ts(2322)
🤔（あれ…number型じゃないの？？）
正しいtimeoutIdの型と解決方法を調べてみました。
setTimeoutの型
結論から言うと、以下のように書けば良いそうです。
const timeoutId = useRef<ReturnType<typeof setTimeout>>();
こちらに回答が載っていました。
世界にも同じように悩んだ方がいたんですね！
どうやら原因は、TypeScriptのコンパイラがsetTimeout関数の型をNode.js環境向けに推論していることにありそうです。
ブラウザではnumberを返すのに対して、Node.jsではTimer型（NodeJS.Timer）を返します。
そのため、ブラウザで正常に動作したとしても、Node.js環境ではエラーになってしまいます。
よって、解決するためには、プラットフォームに関係なく動くような型指定が必要です。
ReturnType<typeof setTimeout>で何をしているのかを考えてみます。
まずはtypeofでsetTimeoutの型を取得します。
次にReturnTypeは、関数の型から戻り値の型を取得するTypeScriptのユーティリティ型の１つです。よってReturnType<typeof setTimeout>と組み合わせることで、setTimeout関数の戻り値の型を取得できるというわけです。
これにより、number型やNodeJS.Timer型など、setTimeout関数が返す型が正確に指定されるため、プラットフォームに関係なく型を指定することができました。
実装
timeoutIDの型を変更してエラー解消です！
const [showFlashMessage, setShowFlashMessage] = useState(false);
- const timeoutIdRef = useRef<number>();
+ const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
// フラッシュメッセージを表示
setShowFlashMessage(true);
// 10秒後に非表示にする
timeoutIdRef.current = setTimeout(() => {
setShowFlashMessage(false);
}, 10000);
おわりに
TypeScriptの型推論に振り回された話でした。
結果的に、特殊な型指定の方法を学ぶことができました！
今後も出てきそうな実装なので、頭に入れておきたいと思います。
それにしても、同じように悩んだ人が世界のどこかにいるというのは、ちょっと嬉しいですね。
大変助かりました🙏