Блог

Это очень интересный вопрос.Некоторое время назад я потратил много времени на изучение встроенных типов react. Это то, что я нашел/понял:

Если вы используете jsx синтаксис, вы никоим образом не сможете вывести некоторые конкретные типы.

Взгляните на определения типов FC

     interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

    type VFC<P = {}> = VoidFunctionComponent<P>;

    interface VoidFunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }
 

Как вы, возможно, заметили, возвращается каждый ReactElement<any,any> компонент FUnctionCOmponent .

Вот как Reactlement это выглядит:

     interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }

 

Нас интересует T общий аргумент типа -. Это расширяет JSXElementConstructor

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

JSXElementConstructor это просто рекурсия. Здесь нет ничего полезного.

Собственный синтаксис React намного интереснее.

Рассмотрим следующий пример:

 const foo = React.createElement("a"); // ok

 

Вот где происходит волшебство. Взгляните на createElement шрифты:

     // DOM Elements
    // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"
    function createElement(
        type: "input",
        props?: InputHTMLAttributes<HTMLInputElement> amp; ClassAttributes<HTMLInputElement> | null,
        ...children: ReactNode[]): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
    function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
        type: keyof ReactHTML,
        props?: ClassAttributes<T> amp; P | null,
        ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
    function createElement<P extends SVGAttributes<T>, T extends SVGElement>(
        type: keyof ReactSVG,
        props?: ClassAttributes<T> amp; P | null,
        ...children: ReactNode[]): ReactSVGElement;
    function createElement<P extends DOMAttributes<T>, T extends Element>(
        type: string,
        props?: ClassAttributes<T> amp; P | null,
        ...children: ReactNode[]): DOMElement<P, T>;

    // Custom components

    function createElement<P extends {}>(
        type: FunctionComponent<P>,
        props?: Attributes amp; P | null,
        ...children: ReactNode[]): FunctionComponentElement<P>;
    function createElement<P extends {}>(
        type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
        props?: ClassAttributes<ClassicComponent<P, ComponentState>> amp; P | null,
        ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>;
    function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
        type: ClassType<P, T, C>,
        props?: ClassAttributes<T> amp; P | null,
        ...children: ReactNode[]): CElement<P, T>;
    function createElement<P extends {}>(
        type: FunctionComponent<P> | ComponentClass<P> | string,
        props?: Attributes amp; P | null,
        ...children: ReactNode[]): ReactElement<P>;
 

Эта функция знает все. Ты хочешь IntrinsicElements ? Нет проблем!

 const createElement = <T extends keyof JSX.IntrinsicElements>(elem: T) =>
  React.createElement(elem);

const test = createElement("a"); // ok
const test_ = createElement(null); // error
 

Тип, вас интересует, что такое : DetailedReactHTMLElement<HTMLAttributes<HTMLElement>, HTMLElement>

Вы можете найти его внутри createElement перегрузок.

Не стесняйтесь экспериментировать.

Некоторое время назад я написал две статьи на эту тему. Вы можете найти их в моем блоге:

Ввод текста реагируют дети

Ввод возвращаемого типа react

Не строго связаны, но все равно могут быть вам интересны: Ввод реквизита react

Я не уверен, что ответил на ваш вопрос, но надеюсь, вы найдете мой ответ полезным

Обновить

Вы также можете переопределить FUnctionComponent интерфейс, он частично помогает, но все равно реагирует.Фрагмент:

 interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>

}

// ok
const Foo: FunctionComponent<{ label: string }> = (props) => {
  return <div></div>
}

// error
const Bar: FunctionComponent<{ label: string }> = (props) => {
  return 42
}

// error
const Baz: FunctionComponent<{ label: string }> = (props) => {
  return null
}

// error
const Bat: FunctionComponent<{ label: string }> = (props) => {
  return 'str'
}

const x = React.Fragment
// no error
const Fragment: FunctionComponent<{ label: string }> = (props) => {
  return <></>
}