Type 'Boolean | (() => void)' is not assignable to type '() => void'

React+ Typescript를 사용하여 커스텀 Hook으로 다크모드를 만들던 중 toggle 함수를 작동하는데 있어 오류가 발생하였다.

문제 발생

문제 원인

이는 커스텀 Hook이 반환하는 배열의 타입을 지정하지 않아서 생기는 문제로 확인이 된다.

내가 만든 커스텀 hook은 아래와 같다.

import { useEffect, useState } from "react";

const useDarkMode = () => {
  const [themeMode, setThemeMode] = useState<boolean>(true);

  const handleThemeMode = () => {
    window.localStorage.setItem("theme", JSON.stringify(!themeMode));
    setThemeMode((prevMode) => !prevMode);
  };

...

  // 여기 리턴되는 배열의 타입이 지정되 있지 않다.
  return [themeMode, handleThemeMode];
};
export default useDarkMode;

문제 해결

첫번째 방법

튜플을 사용하여 return 배열의 type 지정하기

import { useEffect, useState } from "react";

// 반환하는 배열의 타입을 지정해준다.
const useDarkMode = (): [boolean, () => void] => {
  const [themeMode, setThemeMode] = useState<boolean>(true);

  const handleThemeMode = () => {
    window.localStorage.setItem("theme", JSON.stringify(!themeMode));
    setThemeMode((prevMode) => !prevMode);
  };

...

  return [themeMode, handleThemeMode];
};
export default useDarkMode;

두번째 방법

const assertion를 추가한다.

import { useEffect, useState } from "react";

// 반환하는 배열의 타입을 지정해준다.
const useDarkMode = () => {
  const [themeMode, setThemeMode] = useState<boolean>(true);

  const handleThemeMode = () => {
    window.localStorage.setItem("theme", JSON.stringify(!themeMode));
    setThemeMode((prevMode) => !prevMode);
  };

...

  return [themeMode, handleThemeMode] as const;
};
export default useDarkMode;

이 경우 반환 된 배열을 읽기전용인 튜플로 타입을 지정해준다.

참고

• fettblog
• react-typescript-cheatsheet
• typescriptlang