TypeScript를 이용한 React-Router 컴파일 오류 문제 해결

title_thumbnail(TypeScript를 이용한 React-Router 컴파일 오류 문제 해결)

Table of Contents

타입스크립트로 react-router 사용하기

작은 React 앱을 타입스크립트로 이식하고 react-router에서 문제를 겪고 있다면 혼자가 아닙니다. 이 블로그 포스트에서는 타입스크립트를 사용하여 일련의 react-router 루트를 초기화하는 올바른 방법을 탐색합니다. 또한 일반적인 컴파일 오류를 해결하는 방법도 제공합니다.

컴파일 오류

react-router와 타입스크립트를 함께 사용할 때 다음과 유사한 컴파일 오류가 발생할 수 있습니다:

js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<RouteProp, any>'.
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<DefaultRouteProp, any>'.
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'.
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'.
Types of parameters 'Handler' and 'Handler' are incompatible.
Type 'Component<any, any>' is not assignable to type 'RouteClass'.
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures.

해결책 1: React-Router 정의 업데이트

이러한 컴파일 오류를 해결하기 위한 잠재적인 해결책은 react-router의 정의를 업데이트하는 것입니다. DefinitelyTyped에서 최신 정의를 사용하고 있어야 합니다. JSX 요소가 올바르게 인식되도록하기 위해 `–jsx react` 플래그를 통해 최신 TypeScript 빌드를 사용하는 것이 좋습니다.

또한, JSX 요소 유형 ‘Component’에는 ‘render()’ 메소드가 있는 생성자 함수가 없는 문제가 있었습니다. 이 문제는 DefinitelyTyped 정의에서 수정되었습니다.

해결책 2: TypeScript 정의 수정

정의를 업데이트한 후에도 오류가 계속 발생하는 경우, TypeScript 정의를 직접 수정해 볼 수 있습니다. 다음 변경 사항은 문제를 해결하는 데 도움이 될 수 있습니다:

`react.d.ts`에서 `JSX.ElementClass` 인터페이스의 `render` 속성을 제거하세요:

interface ElementClass extends React.Component<any, any> {
}

`react-router.d.ts`에서 `run` 메소드의 `routes` 매개변수 유형을 `React.ReactElement`으로 업데이트하세요:

function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router;
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router;

해결책 3: TypeScript 1.6 회피책

react-router와 TypeScript 1.6을 함께 사용하는 경우, 다음 코드 변경을 적용할 수 있습니다:

interface RouterClass extends React.ComponentClass<any> {}

var Router: RouterClass;

// For Router

function createElement(
    type: ReactRouter.RouterClass,
    props: any,
    ...children: __React.ReactNode[]
): ReactRouter.Router;

interface RouteProp {
    name?: string;
    path?: string;
    handler?: React.ComponentClass<any>;
    ignoreScrollBehavior?: boolean;
    component?: React.ComponentClass<any>;
}

결론

이 블로그 포스트에서 제시한 단계를 따르면, 타입스크립트로 react-router를 사용할 때 일반적인 컴파일 오류를 해결할 수 있습니다. 자신의 특정 상황에 따라 react-router 정의를 업데이트하거나 필요에 따라 수정하거나 TypeScript 1.6 회피책을 적용하세요. 즐거운 코딩하세요!

참고 자료 :

reactjs