Kohama Note

rehype-react

rehype plugin to transform to React.

rehype プラグインで React に変換する。

Type '([props]: Props) => JSX.Element' is not assignable to type 'ComponentLike<ReactElement<{}, string | JSXElementConstructor<any>>, ComponentPropsWithoutNode>'.

Type '([props]: Props) => JSX.Element' is not assignable to type 'ComponentLike<ReactElement<{}, string | JSXElementConstructor<any>>, ComponentPropsWithoutNode>'.

Conversion of type '([props]: Props) => JSX.Element' to type 'ComponentLike<Element, ComponentPropsWithoutNode>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
Conversion of type '([props]: Props) => JSX.Element' to type 'ComponentLike<Element, ComponentPropsWithoutNode>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Types of parameters '__0' and 'props' are incompatible.
    Type 'ComponentPropsWithoutNode' is missing the following properties from type 'Props': [props.keys]ts(2352)

原因

Props と ComponentPropsWithoutNode の定義である Record<string, unknown> とで定義が合わなかった。

解決方法

([props]: Props) => JSX.Element のインスタンスを ComponentLike<JSX.Element, Props> でキャストする。

ComponentLike<ReactElement<{}, string | JSXElementConstructor<any>>, ComponentPropsWithoutNode>

(props: Record<string, unknown>) => (ReactElement<{}, string | JSXElementConstructor<any>>) | null

ComponentLike

type ComponentLike<
  T,
  P extends ComponentPropsWithoutNode = ComponentPropsWithoutNode
> = (props: P) => T | null

ComponentPropsWithoutNode

type ComponentPropsWithoutNode = Record<string, unknown>

Record

Record<Keys, Type>

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.

プロパティキーが Keys で、プロパティ値が Type であるオブジェクト型を構築します。このユーティリティは、ある型のプロパティを別の型にマッピングするために使用することができます。

JSXElementConstructor

type JSXElementConstructor<P> =
| ((props: P) => ReactElement<any, any> | null)
| (new (props: P) => Component<any, any>);

Content Navigation