TS 마이그레이션 중 겪은 이슈

@imironjin @sykang013

안녕하세요. TS 마이그레이션 중 겪은 두가지 이슈를 공유하려고 합니다.

1. as 사용

먼저 Svg 컴포넌트 마이그레이션 중 겪은 문제입니다.

interface IStSvg {
  desktopW?: number | string;
  desktopH?: number | string;
  tabletW?: number | string;
  tabletH?: number | string;
  width: number | string;
  height: number | string;
}

interface ISvgProps extends IStSvg {
  id: string;
}

현재 타입 설정은 위와 같이 되어있습니다.

const StSvg = styled.svg<IStSvg>`
  width: ${(props) =>
    isNaN(Number(props.width)) ? props.width : rem(props.width)};
  height: ${(props) =>
    isNaN(Number(props.height)) ? props.height : rem(props.height)};
  display: inline-block;

  ${(props) =>
    props.tabletW &&
    props.tabletH &&
    css<IStSvg>`
      @media (min-width: 768px) {
        width: ${(props) =>
          isNaN(Number(props.tabletW)) ? props.tabletW : rem(props.tabletW)};
        height: ${(props) =>
          isNaN(Number(props.tabletH)) ? props.tabletH : rem(props.tabletH)};
      }
    `}

위 코드에서 rem(props.tabletW), rem(props.tabletH)에 에러가 뜨는데 props.tabletW, props.tabletH의 타입은 number | string | undefined고 rem에서는 인수로 number | string만 받을 수 있기 에러가 발생하고 있습니다. 이미 props.tabletW와 props.tabletH가 truthy한지 체크했음에도 타입은 여전히 number | string | undefined 입니다.

  ${(props) =>
    props.tabletW &&
    props.tabletH &&
    css<IStSvg>`
      @media (min-width: 768px) {
        width: ${(props) =>
          isNaN(Number(props.tabletW)) ? props.tabletW : rem(props.tabletW as number | string)};
        height: ${(props) =>
          isNaN(Number(props.tabletH)) ? props.tabletH : rem(props.tabletH as number | string)};
      }
    `}

해결방법으로 as를 사용하기로 했지만 다른 해결 방법이 있는지도 궁금합니다.

2. firebase custom hook 타입설정

useReadSearchData.js를 마이그레이션하는 과정에서 data와 error에 대한 타입 설정에 어려움이 있습니다.

 try {
      const collectionRef = dbService.collection(collectionKey);
      const snapshot = await collectionRef
        .where('title', '>=', keyword)
        .where('title', '<=', keyword + '\uf8ff')
        .get();
      snapshot.forEach((doc) =>
        setData((data) => [...data, { ...doc.data() }])
      );
    } catch (error) {
      setError(error);
    } finally {
      setIsLoading(false);
    }

위 타입설정에 대한 의논이 이루어지면 나머지 custom hook 타입 설정도 수월할 것 같습니다!

likelion-reactproject-lab12 / together

TS 마이그레이션 중 겪은 이슈 #127