Type Guard

타입가드 사례 1)

• 문제상황

  e.target.dataset.value의 타입이 string이기 때문에 에러 발생함.

const handleGenreChange = useCallback(
  (e: React.MouseEvent<HTMLElement>) => {
    const { label } = (e.target as HTMLElement).dataset;
    setGenreName(label);
    onClickHandler(e);
  },
  [genreName],
);

• 해결

  내가 정의해준 타입으로 타입을 좁혀주기 위해 타입 가드 사용.
  (참고: https://www.qualdesk.com/blog/2021/type-guard-for-string-union-types-typescript/)

export const GENRE_KEY_LIST = [
  'All Genre',
  'EDM Top Line',
  'Easy Listening Top Line',
  // .... 이하 생략
] as const;

export type GenreKeyType = typeof GENRE_KEY_LIST[number];

const handleGenreChange = useCallback(
  (e: React.MouseEvent<HTMLElement>) => {
    //type guard
    const isGenreKey = (value: string | undefined): value is GenreKeyType => {
      return GENRE_KEY_LIST.includes(value as GenreKeyType);
    };
    const { label } = (e.target as HTMLElement).dataset;
    if (!isGenreKey(label)) return;
    setGenreName(label);
    onClickHandler(e);
  },
  [genreName],
);