[Svelte + Tinro 라우터 에러] Argument of type 'typeof Route' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent' 에러 해결

참고

https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661

 

에러 

tinro 에서 Route 라이브러리 import 해주고 나서 다음 같이 사용하려니 에러가 났다.

Argument of type 'typeof Route' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'

 

원인

발생한 에러 메시지를 확인해보면 Route의 타입이 ConstructorOfATypedSvelteComponent와 일치하지 않는다고 한다.

tinro 라이브러리 타입 정의 파일 확장자가 기본적으로 ts 인데

이 파일에 Route 타입이 별도로 정의되지 않아서 이런 타입 에러가 발생하는 것 같다.

 

해결 

다른 사람이 남긴 Github 이슈를 참고해서 임시적으로 해결했다. (상단 참고 링크)

node_modules > tinro 라이브러리의 타입 정의 파일(index.d.ts)을 수정해주면 된다.

파일 상단에 import type { SvelteComponentTyped } from "svelte"; 추가해주고

export class Route {} 부분 코드 삭제하고, 아래 내용으로 변경해줬다.

type RouteArgs = {
    /**
    * Exact o relative path of the route
    * @default "/*"
    */
    path?: string;

    /**
     * Is route fallback
     * @default false
     */
    fallback?: boolean;

    /**
     * Redirect route to the specified path
     */
    redirect?: string;

    /**
     * Will be show only first matched with URL nested route
     * @default false
     */
    firstmatch?: boolean;

    /**
     * Name of the route to use in breadcrumbs
     * @default null
     */
    breadcrumb?: string;	
}

export class Route extends SvelteComponentTyped<RouteArgs> {
    $$prop_def: {
      /**
       * Exact o relative path of the route
       * @default "/*"
       */
      path?: string;
  
      /**
       * Is route fallback
       * @default false
       */
      fallback?: boolean;
      /**
       * Redirect route to the specified path
       */
      redirect?: string;
      /**
       * Will be show only first matched with URL nested route
       * @default false
       */
      firstmatch?: boolean;
      /**
       * Name of the route to use in breadcrumbs
       * @default null
       */
      breadcrumb?: string;
    };
  
    $$slot_def: { default: {
      /** Current meta for the route */
      meta: TinroRouteMeta
      /** @deprecated Use meta.params instead */
      params: Record<string, string>
    } };
  }

 

결과 화면