[TypeScript]JS -> TS 리팩토링하며 겪은 오류
오류 메세지 :
Cannot use JSX unless the '--jsx' flag is provided.ts(17004) const Container: IStyledComponent<"web", FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>
오류 원인 :
TypeScript가 JSX 확장자 파일 인식을 못해서.
해결 방법 :
jsx 속성을 추가한다.
오류 메세지:
Argument of type 'ProductItem | undefined' is not assignable to parameter of type 'ProductItem'.
Type 'undefined' is not assignable to type 'ProductItem'
오류 원인 :
정의되지 않은 값이 들어올수 있다고 TS에게 정의를 하지 않아서, 알 수 없는 타입을 전달하는 과정에서 생김
해결방법 : non-null 단언 연산자를 붙여줌
오류 메세지 :
Cannot find module '../../assets/images/icon_breadcrumb.png' or its corresponding type declarations.ts(2307)
오류 원인 :
이미지 파일의 경로에 대한 모듈 또는 타입 선언을 찾을 수 없다고 나타내는 것
해결방법 : 별도의 파일을 만들어서 확장자 등록하기
src->util경로에 아래와 같이 파일을 만들어줌. 파일 이름은 : images.d.ts
오류 메세지:
annot find module '../../data/banner.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)
오류 원인 :
TypeScript가 import 문에서 지정된 모듈을 찾지 못하는 경우에 발생
해결방법 :
TypeScript의 tsconfig.json 파일에서 resolveJsonModule 옵션을 다음과 같이 활성화
오류 메세지:
Type '{ children: Element[]; ref: Dispatch<any>; onSwiper: (swiperInstance: Swiper) => void; onSlideChange: (swiper: Swiper) => void; className: string; slidesPerView: number; ... 4 more ...; allowTouchMove: boolean; }' is not assignable to type 'SwiperOptions'.
Types of property 'modules' are incompatible.
Type '{ Navigation: SwiperModule; }' is missing the following properties from type 'SwiperModule[]': length, pop, push, concat, and 29 more.ts(2322)
(alias) const Swiper: React.FunctionComponent<React.RefAttributes<SwiperRef> & Omit<React.HTMLAttributes<HTMLElement>, "onKeyPress" | "onProgress" | "onResize" | "onClick" | ... 5 more ... | "onTransitionEnd"> & SwiperOptions & {
...;
} &
오류 원인 :
SwiperOptions 유형의 modules 속성은 SwiperModule 배열이지만
객체를 전달하고 있어서 오류발생
해결방법 :
modules 속성을 배열로 전달해야 하기때문에
해당속성을 추가했다.
오류 메세지:
No overload matches this call.
Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, void, void, {}, {}>): Element', gave the following error.
Type '{ children: Element[]; className: string; active: boolean; }' is not assignable to type 'IntrinsicAttributes & FastOmit<Substitute<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, FastOmit<...>>, keyof ExecutionProps> & FastOmit<...> & { ...; }'.
Property 'active' does not exist on type 'IntrinsicAttributes & FastOmit<Substitute<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, FastOmit<...>>, keyof ExecutionProps> & FastOmit<...> & { ...; }'.
Overload 2 of 2, '(props: FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>): ReactNode', gave the following error.
Type '{ children: Element[]; className: string; active: boolean; }' is not assignable to type 'IntrinsicAttributes & FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>'.
Property 'active' does not exist on type 'IntrinsicAttributes & FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>'.ts(2769)
(property) active: boolean
오류 원인 :
active 프로퍼티가 ul 요소에서 인식되지 않는 이유 때문에 발생,
active와 같은 사용자 지정 속성를 HTML 엘리먼트에 전달하려면 (<ul>요소에 사용자 지정 속성을 직접 추가 할 수 없음)
data-* 속성을 사용하거나 다른 방식으로 데이터를 보관해야한다고 함... (머리가 터질 것 같다..)
해결방법 :
조건문으로 변경! active 프로퍼티를 <ul> 엘리먼트에 직접 전달하는 대신,
React 컴포넌트 내에서 상태를 관리하고 이 상태에 따라 엘리먼트를 조건부로 렌더링함.
