[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 속성을 추가한다.

바꾸는데 이런게 떴다면..!

tsconfig.json에 위의 속성을 추가한다.

 

---

오류 메세지:

Argument of type 'ProductItem | undefined' is not assignable to parameter of type 'ProductItem'.
Type 'undefined' is not assignable to type 'ProductItem'

 

오류 원인 :

정의되지 않은 값이 들어올수 있다고 TS에게 정의를 하지 않아서, 알 수 없는 타입을 전달하는 과정에서 생김

 

해결방법 :  non-null 단언 연산자를 붙여줌

 

이렇게 정의를 이미 했지만!

이 부분에서

이젠 이게뜸;

이렇게 non-null 연산자를 붙여준다.

---

오류 메세지 :

Cannot find module '../../assets/images/icon_breadcrumb.png' or its corresponding type declarations.ts(2307)

 

오류 원인 :

이미지 파일의 경로에 대한 모듈 또는 타입 선언을 찾을 수 없다고 나타내는 것

 

해결방법 :  별도의 파일을 만들어서 확장자 등록하기 

src->util경로에 아래와 같이 파일을 만들어줌. 파일 이름은 : images.d.ts

 

tsconfig.json에 해당 파일 등록하기 / 경로설정 ㅡ 여러개일경우 오른쪽과 같이 등록하면된다.

---

오류 메세지:

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 속성을 배열로 전달해야 하기때문에

해당속성을 추가했다.

 

이렇게 Swiper속성에 추가함

---

오류 메세지:

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 컴포넌트 내에서 상태를 관리하고 이 상태에 따라 엘리먼트를 조건부로 렌더링함.

사용자 지정 프로퍼티를 직접 추가 할 수 없는이유는 위와 같다!