Реагирующий тип машинописи 'F C <{....}>' не удовлетворяет 'F C <{}>' - PullRequest
Новая
       54

Реагирующий тип машинописи 'F C <{....}>' не удовлетворяет 'F C <{}>'

0 голосов
/ 30 апреля 2020 
import * as React from "react";

const Input: React.FC<{ abc: string }> = props => {
  return <input />;
};

const F = <T extends React.FC>(
  props: React.PropsWithChildren<
    { Component: T; a: string; b: boolean; c: object } & Parameters<T>[0]
  >
) => {
  const { Component, a, b, c, ...other } = props as { Component: React.FC<any> };
  return <Component {...other } />;
};

export default function App() {
  return <F Component={Input} abc='123'/>;
}

это сообщение об ошибке 

Type 'FC<{ required: string; }>' is not assignable to type 'FC<{}>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '{ children?: ReactNode; }' is not assignable to type 'PropsWithChildren<{ required: string; }>'.
      Property 'required' is missing in type '{ children?: ReactNode; }' but required in type '{ required: string; }'

это происходит, если элемент Input требует реквизита, в этом случае abc реквизита

решение, которое я пытался :

решение 1:

ошибка исчезнет, ​​если я поменяю <T extends React.FC> на <T extends React.FC<any>>

это изменит мой тип props на any из-за & Parameters<T>[0]

Тем не менее, я могу решить эту проблему, набрав реквизит

2-е решение - я меняю <T extends React.FC> на <T extends typeof Input>

========= ================================================== ==================

У меня есть 2 вопроса

Мне не нравится решение 1, потому что мне нужно набрать его, думаю это не «правильный» способ сделать это

Я думаю, что решение 2 хорошо, но оно станет странным, если я объединю его с большим количеством компонентов, например, <T extends typeof Input|typeof Input2>

, поэтому первый вопрос, Как правильно решить этот

второй вопрос, помогите мне понять, почему ошибка?

здесь коды и коробка (поставляются с решениями abo ве)

...