raectのコンポーネントのpropsの型を、スプレッド構文の箇所のみanyにしたい

Question

interface Props {
  height: number
}

const Component: VFC<Props> = ({ height, ...props }) => {
  return <img height={height} {...props} />
}

// 型Propsにwidthが存在しないためエラー
const el = <Component height={123} width={456} />

現在atomic designを勉強しているのですが、atomsのような抽象的なコンポーネントを作る際に、ある程度自由にpropsを流し込みたいと思い上記の様なコンポーネントを作成したのですが、どうしても型のエラーが出てしまいます。

例えば上記のコードだと、propsにheightが存在しないとエラー、その他のpropsは存在しなくてもいいが存在してもエラーにならないというような型を作ることはできるのでしょうか？

試しにprops?:anyのような型を追加してみたりもしたのですがやはり上手くいきませんでした…
よろしければ方法をお教えいただければと思います。

Answer 1

Propsの型定義を以下のようにすれば良いと思います。

interface Props {
  [key: string]: any;
  height: number;
}