TIL 221103 useState에 타입 정해주는 법

처음에는 모든걸 괄호 안에 적어줬는데 자꾸 빨간줄을 띄우길래 괄호 안에 있던 걸 변수로 분리해줬다. 그래도 menu에서 빨간 줄을 띄웠다.

  const getRandomMenu = () => {
    const randomNum = Math.floor(Math.random() * foodArr.length);
    const menu =
      foodArr[randomNum] !== undefined
        ? foodArr[randomNum]
        : '분류를 선택해주세요';
    // 여기서 menu에 자꾸 빨간 줄을 띄웠다.
    setTodayMenu(menu);
  };

 

나는 아무것도 하지않았으나 타입스크립트가 추론하길 이 자리에 null과 undefined이 들어갈 수 없어서 불만을 띄운 것 같았다. 그래서 todayMenu state에 타입을 정해주기로 했다.

Argument of type 'string | null | undefined' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'undefined' is not assignable to type 'SetStateAction<string>'.

 

 

처음에 useState에도 콜론(:)을 이용해서 타입을 지정해 줄 수 있다고 생각했다. 그런데 자꾸 에러가 뜨는 것이다....🥲

// 틀림
type Menu = string | undefined | null;

...

const [todayMenu, setTodayMenu] = useState : Menu('뭘까요?');

 

사실 useState에는 <T>로 타입을 정해주는 것이었다.🥺

// 맞음
type Menu = string | undefined | null;

...

const [todayMenu, setTodayMenu] = useState<Menu>('뭘까요?');

 

 

타입스크립트는 맨날 화내는데 대체 왜 화났는지 모르겠어서 눈물이 난다...🥲 타선생님 제발 화 좀 그만내세요.....😇

 

참고