[React / TypeScript] interface로 타입 정의 중 발생한 이슈 (useParams, Params) - TS2344

1. 이슈

import React from "react";
import { useParams } from "react-router-dom";

interface RouteParams {
  coinID: string;
}

const Coin = () => {
  const { coinID } = useParams<RouteParams>();

  return <h1>Coin</h1>;
};

export default Coin;

위와 같이 작성했을 때, 아래와 같이 에러가 나왔다.

ERROR in src/routes/Coin.tsx:9:32
TS2344: Type 'RouteParams' does not satisfy the constraint 'string | Record<string, string | undefined>'.
  Type 'RouteParams' is not assignable to type 'Record<string, string | undefined>'.
    Index signature for type 'string' is missing in type 'RouteParams'.
     7 |
     8 | const Coin = () => {
  >  9 |   const { coinID } = useParams<RouteParams>();
       |                                ^^^^^^^^^^^
    10 |
    11 |   return <h1>Coin</h1>;
    12 | };

 

2. 해결방법

import React from "react";
import { Params, useParams } from "react-router-dom";  // 변경

interface RouteParams extends Params {   // 변경
  coinID: string;
}

const Coin = () => {
  const { coinID } = useParams<RouteParams>();

  return <h1>Coin</h1>;
};

export default Coin;

위와 같이 해결했다. useParams 자체가 Params에서 정의된 타입을 가져와서 사용하기 때문에 Params으로 부터 확장해서 사용하면 되는 것이었다.

useParams의 타입을 추적해보면 다음과 같이 나온다. string이 있을 경우 Params로 부터 extend 하기 때문에 Params를 확장 타입으로 사용해주면 된다.

useParams 타입 정의

Params의 타입 정의

 

Conclusion

뭔가 좀 더 익숙해지면, 이해가 더 잘 될 것 같다.

interface 대신 type을 사용하면 바로 해결되는 문제이지만,

interface로 해결하는 방법을 찾아내어서 좀 더 잘 이해가 된 느낌이다.

하여간, 대충 이해하고 넘기는 게 가장 위험하다-ㅅ-

 

참고

Possible useParams TypeScript broken definition · Issue #8200 · remix-run/react-router