reactjs - Reactのプロパティにおけるインデックスシグネチャ

私はTSでReactのpropsの型を正しく記述する方法を探しています。

私のコンポーネントのプロップは次のようなものです：

interface Props {
  prop1: number,
  prop2: string,
}

しかし、私のコンポーネントは classNames も prop として受け取ります（例：_myClassName はクラス my-class-name に変換されます）。

上記の props タイプでは、TS はエラー _myClassName は型 Props に存在しません を出力します。Props を次のように変更しようとしました:

interface Props{
  prop1: number,
  prop2: string,
  [className: string]: any,
}

しかし、その場合 TS は prop1 と prop2 の型をチェックしません。次のコードはエラーを出しません:

<MyComponent prop1="some-string" /> // prop1 must be a number

では、そのような場合を対処する正しい方法はありますか？

回答 #1

解決策を見つけました。同じ問題に直面するすべての人のために:

interface Props {
  prop1: number,
  prop2: string,
}

export const MyComponent = <P extends Props>(props: P): React.ReactElement | null => {
  // code here
};

その結果、私たちは得ます：

<MyComponent prop1="some-string" /> // error, prop1 must be a number

<MyComponent prop1={0} prop2="some-string" _myClassName /> // no error on additional prop, other props type checks