React/TypeScript: 他のコンポーネントの型注釈（型の定義）を取得する方法備忘録

ComponentPropsを使用する。

コード

const HogeTypes = ComponentProps<typeof Hoge>

応用: chakra-uiの提供するHeadingコンポーネントの型注釈を取得し継承？しつつ独自のtextを定義している。

import { ComponentProps } from "react"
import { Heading } from "@chakra-ui/react";

type Props = ComponentProps<typeof Heading> & {
  text: string;
};