[TIL] useMatches 타입캐스팅 관련

프로젝트에서 브레드크럼을 작업중인데 /(슬래시)로 split을 해 올래도 서버 쪽의 url이랑 맞추다보면 슬래시를 두 번 사용하게 되는 경우도 존재해서 완벽한 방법이 아니었다.
그러던 중에 react-router-dom의 useMatches()를 사용하면 depth별로 구분할 수 있다는 사실을 알게되었다!

다만 문제는...
useMaches는 hooks 자체에 아래와 같이 타입캐스팅이 되어있다.

export declare function useMatches(): UIMatch[];

제네릭으로 바꿀 수 있는 형식이 아니어서 타입이 계속 맞지 않았다.

작업하고 있는 프로젝트에서는 아래와 같이 쓰고 있다.
handle 안에 오브젝트를 만들어서 해당 url의 제목을 명시한다.

const CompanyRoutes = {
  path: 'company',
  handle: { title: '고객사 관리' },
  children: [
    {
      path: 'company-manage',
      handle: { title: '고객사 일반관리' },
      children: [
        {
          path: '',
          element: <CompanyManage />,
          handle: { title: '고객사 일반관리' }
        },
        {
          path: 'add',
          element: <CompanyAddPage />,
          handle: { title: '고객사 생성' }
        },
        {
          path: ':comId',
          element: <CompanyDetailPage />,
          handle: { title: '고객사 상세' }
        }
      ]
    }
  ]
};

그런데 원래 UIMatches의 타입에서는 Handle이 unknown으로 넘어오다보니 여기에 title은 없다고 계속 빨간 줄이 떠 있었다(나타나기는 함, 타입에만 없을 뿐 실제로는 존재하고 있기 때문에).

근데 이 타입은 제네릭이 아니어서 가져와서 내 마음대로 고치고 이럴 수는 없다고 하더라고. 어쩌지어쩌지 하고 있다가 정수님한테 물어봐서는 해답을 얻었다.

// react-router-dom.d.ts 파일을 만듦
import 'react-router-dom';

declare module 'react-router-dom' {
  export declare function useMatches(): UIMatch<{ Handle: { title?: string } }>[];
}

이렇게 아예 모듈 자체를 overriding 하는 형식으로 파일을 하나 만들면 전체 프로젝트에서 useMatches의 타입이 바뀐다고!