Функциональные компоненты¶

/**[0] */
import React from 'react';

/**[1] */
function Timer(/**[2] */) /**[3] */ {
    return <div>Is Timer!</div>;
}

export default Timer;

/**
 * [1] функциональный компонент
 * определенный как Function Declaration.
 * [2] отсутствующие параметры.
 * [3] отсутствие явного указания типа
 * возвращаемого типа.
 * [0] все компоненты обязаны импортировать
 * пространство имен React.
 */

/**
 * Error ->
 * 'React' ссылается на глобальный UMD, но текущий файл является модулем.
 * Рассмотрите возможность добавления импорта вместо этого.
 */

export function Message() {
    return <span>I ❤️ TypeScript!</span>;
}

import React from 'react';

/**
 * Ok -> добален импорт пространства имен React
 */

export function Message() {
    return <span>I ❤️ TypeScript!</span>;
}

/**[0] */
interface Props {
    message?: string /**[1] */;
    duration: number /**[2] */;
}

/**[3] */
function Timer({ duration, message = `Done!` }: Props) {
    return <div></div>;
}

/**
 * [0] определения типа интерфейса
 * который будет указан в аннотации
 * первого параметра функционального
 * компонента [3] и чье описание
 * включает необязательное поле message [1]
 *  и обязательного duration [2]
 */

// file Informer.tsx

/**[0] */
interface Props {
    message: string;
}

/**
 * [0] описание пропсов компонента Informer
 */

export default function Informer({ message }: Props) {
    return <h1>{message}</h1>;
}

// file InformerDecorator.tsx

import Informer from './Informer';

/**[0] */
interface Props {
    decor: number /**[1] */;
    message: string /**[2] */;
}

/**
 * [0] описание пропсов компонента InformerDecorator
 * [1] значение предназначаемое непосредственно текущему компоненту
 * [2] значение предназначаемое компоненту Informer
 */

export default function InformerDecorator({
    decor,
    message,
}: Props) {
    return <Informer message={message + decor} />;
}

// file Informer.tsx

/**[0] */ /**[1] */
export interface InformerProps {
    message: string;
}

/**
 * [0] экспорт типа
 * [1] уточнение идентификатора (имени)
 */

export default function Informer({
    message,
}: InformerProps) {
    return <h1>{message}</h1>;
}

// file InformerDecorator.tsx
/**[0] */
import Informer, {
    InformerProps,
} from './Informer'; /**[2] */ /**[3] */

/**
 * [0] импорти типа пропсов
 */

/**[1] */ export interface InformerDecoratorProps
    extends InformerProps {
    decor: number;
    /**[4] */
}

/**
 * [1] экспорт типа
 * [2] уточнение идентификатора (имени)
 * [3] расширение типа пропсов другого компонента
 * позволяет не рописывать необходимые ему поля [4]
 */

export default function InformerDecorator({
    decor,
    message,
}: InformerDecoratorProps) {
    return <Informer message={message + decor} />;
}

// @filename: Informer.tsx
import React from 'react';

// InformerProps не экспортируется наружу
interface InformerProps {
    message: string;
}

export default function Informer({
    message,
}: InformerProps) {
    return <h1>{message}</h1>;
}

// @filename: InformerDecorator.tsx

/**[0] */
import React, { ComponentType } from 'react';
/**[1] */
import type Informer from './Informer';

/**[3] [4] [5] [6] [7] */
/**[2] */ type GetProps<T> = T extends ComponentType<
    infer Props
>
    ? Props
    : unknown; /**[9] */

/**[8] */ type InformerProps = GetProps<typeof Informer>;

/**[10] */
export interface InformerDecoratorProps
    extends InformerProps {
    decor: number;
}

/**
 * [0] Импортируем обобщенный тип ComponentType<Props>
 * представляющий объединение классового и функционального
 * компонента. [1] Импортируем как "только тип" функциональный
 * компонент Informer. [2] Определяем тип GetProps<T> параметр типа
 * которого ожидает тип React компонента. Далее, с помощью механизма
 * определения типа на основе условия (условный тип) выясняем принадлежит
 * ли тип [3] T к React компоненту и в этот момент определяем переменную
 * infer Props [5], которая и будет представлять тип пропсов компонент T.
 * Если условие верно, то возвращаем тип [6] Props, иначе unknown.
 * [8] С помощью типа GetProps, на основе типа Informer, полученного
 * с помощью запроса типа [9], определяем новый  тип InformerProps,
 * который в дальнейшем используем по назначению.
 */

export interface InformerProps {
    /**[0] */
    readonly message: string;
}

/**[1] */
export default function Informer({
    message,
}: Readonly<InformerProps>) {
    message = 'new value'; /**[2] */

    return <h1>{message}</h1>;
}

/**
 * [0] добавление модификатора readonly вручную,
 * а затем ещё тоже самое с помощью тип Readonly<T> [1]
 * и тем не менее переменная message изменяема [2].
 */

/**[0] */
let o: Readonly<{ f: number }> = { f: 0 };
o.f = 1; // Error -> [1]

let { f } = o;
f = 1; // Ok -> [2]

/**
 * Определение переменной o с типом инлайн интерфейса [0]
 * поля которого модифицированны с помощью типа Readonly<T>.
 * При попытке изменить член o.f с модификатором readonly
 * возникает ошибка [1] ->
 * Cannot assign to 'f' because it is a read-only property.
 * Чего не происходит при изменении переменной определенной
 * в процессе деструктуризации.
 *
 * Механизм деструктуризации предполагает создание новой
 * переменной со значением одноименного члена объекта указанного
 * в качестве правого операнда выражения.
 * Выражение let {f} = o; эквивалентно выражению let f = o.f;
 * В этом случае создается новая переменная тип которой устанавливается
 * выводом типов. А вот модификатор readonly не применим к переменным.
 */

/**[0] */
import React, { PropsWithChildren } from 'react';

export interface LabelProps {}

/**[1] */
export default function Label({
    children,
}: PropsWithChildren<LabelProps>) {
    return <span>{children}</span>;
}

/**
 * [0] импорт типа PropsWithChildren<T>
 * для указания его в аннотации типа параметров [1].
 */

<Label>{'label'}</Label>; // string as children -> Ok [2]
<Label>{1000}</Label>; // number as children -> Ok [3]
<Label></Label>; // undefined as chiildren -> Ok [4]

/**
 * При создании экземпляров компонента Label
 * допустимо указывать в качестве children
 * как строку [2], так и числа [3] и кроме
 * того не указывать значения вовсе [4]
 */

/**
 * [0] children определены как
 * обязятельное пренадлежащие к
 * типу string поле.
 */
interface LabelProps {
    children: string /**[0] */;
}

export default function Label({ children }: LabelProps) {
    return <span>{children}</span>;
}

<Label>{`label`}</Label>; // Ok
<Label>{1000}</Label>; // Error -> number не совместим со string
<Label></Label>; // Error -> children обязательны

/**[0] */
import React, { ReactElement, ReactNode } from 'react';

/**
 * [0] импорт типа представляющего
 * экземпляр любого компонента.
 */

interface ListItemProps {
    children: ReactNode /**[1] */;
}

/**
 * [1] для примера определим тип children
 * как ReactNode представляющего любой
 * допустимый тип.
 */

function ListItem({ children }: ListItemProps) {
    return <li>{children}</li>;
}

interface ListProps {
    children: ReactElement<ListItemProps> /**[2] */;
}

/**
 * [2] при определении children
 * указываем тип ReactElement<ListItemProps>
 * что стоит понимать как - экземпляр компонента
 * пропсы которого совм6естимы с типом ListItemProps.
 */

function List({ children }: ListProps) {
    return <ul>{children}</ul>;
}

/**[3] */
<List>
    <ListItem>first</ListItem>
</List>;

/**
 * [3] создаем экземпляр List
 * и указываем ему в качестве children
 * один экземпляр ListItem.
 */

/**[0] */
interface ListItemProps {
    children: string;
}

/**
 * [0] оставляем тип пропсов,
 * но для упрощения удаляем компонент
 * нуждающийся в нем.
 */

/**[1] */
interface LabelProps {
    type: 'danger' | `error`;
    children: ReactNode;
}

/**[1] */
function Label({ type, children }: LabelProps) {
    return <span className={type}>{children}</span>;
}

/**
 * [1] определяем компонент Label
 * и описываем его пропсы.
 */

interface ListProps {
    children: ReactElement<ListItemProps> /**[2] */;
}

/**
 * Тип children по прежнему указан
 * как ReactElement<ListItemProps>.
 */

// компонент List удален для упрощения

/**[3] */
<List>
    <Label type={'danger'}>Hello World!</Label>
</List>;

/**
 * [3] несмотря на то что в комопненте List
 * тип children обозначен как ReactElement<ListItemProps>
 * вместо ожидаемого экземпляра без возникновения
 * ошибки устанавливается тип ReactElement<LabelProps>.
 */

// let listItem: JSX.Element
let listItem = <ListItem>first</ListItem>;

// let label: JSX.Element
let label = <Label type={'danger'}>label</Label>;

/**
 * Поскольку оба экземпляра принадлежат
 * к типу JSX.Element который в свою очередь
 * является производным от типа ReactElement<any, any>,
 * то любой экземпляр будет совместим с любым типом ReactElement<P, T>.
 */

let v0: ReactElement<ListItemProps> = label;
let v1: ReactElement<LabelProps> = listItem;

let v: ReactElement<ListItemProps> = <span></span>; // Ok

interface ListProps {
    children: ReactElement<ListItemProps> /**[0] */;
}

/**[1] */
<List>
    <ListItem>first</ListItem>
    <ListItem>second</ListItem>
</List>;

/**
 * [0] тип указан как единственный
 * экземпляр компонента. поэтому при
 * установке множества экземпляров [1]
 * возникает ошибка.
 */

interface ListProps {
    children:
        | ReactElement<ListItemProps>
        | ReactElement<ListItemProps>[] /**[0] */;
}

/**[1] */
<List>
    <ListItem>first</ListItem>
    <ListItem>second</ListItem>
</List>;

/**
 * [0] указание в качестве типа children
 * объединение предполагающее как единственный
 * экземпляр так и множество, ошибка [1] не возникает.
 */

import React, { useRef, RefObject } from 'react';

function Form() {
    /**[0]         [1]          [2] */
    let formRef = useRef() as RefObject<HTMLFormElement>;

    /**[3] */
    return <form ref={formRef}></form>;
}

/**
 * Создаваемый хуком объект рефы необходимо преобразовать в обобщенный тип
 * RefObject<T> [1] в качестве аргумента которому требуется указать
 * нативный тип формы [2]. Если не произвести преобразования то в момент
 * установки объекта рефы форме [3] возникнет ошибка, поскольку декларации
 * описывавющие React элементы содержут устаревший тип в аннотации поля ref
 *
 * БОЛЕЕ ПОДРОБНО В ТЕМЕ ПОСВЯЩЕННОЙ ХУКУ useRef()
 */

interface ForwardRefRenderFunction<T, P = {}> {
    /**                              [0] */
    (
        props: PropsWithChildren<P>,
        ref:
            | ((instance: T | null) => void)
            | MutableRefObject<T | null>
            | null
    ): ReactElement | null;
}

/**
 * [0] тип объединение определенный
 * непосредственно в аннотации типа.
 * Простыми словами он не имеет более
 * удобного короткого псевдонима.
 */

/**[0]           [1] */
import React, { MutableRefObject, forwardRef } from 'react';

export interface FormProps {}

/**[2] */
export interface FormApi {
    reset: () => void;
}

/**
 * [2] объявление типа описывающего доступное
 * api компонента.
 */
/**[3]       [4]         [5] */
function Form(
    props: FormProps,
    ref: MutableRefObject<FormApi>
) {
    return null;
}

/**[6]          [7]      [8]       [9]     [10] */
const FormWithRef = forwardRef<FormApi, FormProps>(
    Form /**Error */
);

export default FormWithRef; /**[11] */

/**
 * [0] импорт обобщенного типа MutableRefObject<T>
 * который будет указан в аннотации типа [4] второго
 * параметра [3] функионального компонента предварительно
 * получив в качестве аргумента типа тип нативного dom
 * элемента HTMLDivElement [5].
 *
 * Несмотря на все принятые меры по типизации сигнатуры функционального
 * компонента Form избежать возникновения ошибки [10] при проверке на
 * совместимость в момент передачи в качестве аргумента универсальной
 * функции forwardRef [7] не получится даже при конкретизации с помощью
 * аргументов функционального типа [8][9].
 *
 * [11] для экспорта функционального компонента определяющего второй
 * параметр необходимо сохранить результат выполнения функции
 * forwardRef [6].
 */

/**[0] */
import React, {
    MutableRefObject,
    forwardRef,
    ForwardRefRenderFunction,
} from 'react';

export interface FormProps {}
export interface FormApi {
    reset: () => void;
}

function Form(
    props: FormProps,
    ref: MutableRefObject<FormApi>
) {
    return null;
}

/**[6]                          [7]       [8]        [9] */
const FormWithRef = forwardRef(
    Form as ForwardRefRenderFunction<FormApi, FormProps>
);

export default FormWithRef;

/**
 * [0] импорт обобщенного функционального типа
 * ForwardRefRenderFunction<T, P> к которому тип Form [7] будет
 * преобразован с помощью оператора as, для чего потребуется
 * указать необходимые аргументы типа [8] [9]. При этом отпадает
 * потребность в установке аргументов непосредственно универсальной
 * функции [6]
 */

import React, {
    forwardRef,
    ForwardRefRenderFunction,
} from 'react';

export interface FormProps {}
export interface FormApi {
    reset: () => void;
}

/**[0][1]       [2]             [3]            [4] [5] */
type Ref<T> = Parameters<ForwardRefRenderFunction<T>>[1];

/**[6]   [7] */
function Form(props: FormProps, ref: Ref<FormApi>) {
    return null;
}

/**[8] */
const FormWithRef = forwardRef(Form);

export default FormWithRef;

/**
 * При помощи типа Parameters<T> [2] получаем массив элементы которого
 * принадлежат к типам параметров функции представляемой типом
 * ForwardRefRenderFunction<T, P> [3] которому в качестве первого
 * аргумента типа [4] устанавливаем параметр обобщенного псевдонима [1].
 * Таким образом Ref<T> ссылается на первый элемент массива [5]
 * содержащего тип указанный в аннотации второго параметра (ref).
 * Определенный псевдоним указываем в аннотации второго параметра
 * функционального компонента [6] установив в качестве аргумента
 * типа тип нативного dom элемента [7]. При таком сценарии нет
 * необходимости конкретизировать типы при помощи аргументов типа
 * универсальной функции forwardRef<T, P>() [8].
 */

/**[0] */
import React, {
    forwardRef,
    ForwardRefRenderFunction,
    ForwardRefExoticComponent,
} from 'react';

// ...

/**[1]                [2] */
const FormWithRef: ForwardRefExoticComponent<FormProps> = forwardRef(
    Form
);

export default FormWithRef;

/**
 * [0] импорт обобщенного типа ForwardRefExoticComponent<P>
 * который в качестве аргумента типа ожидает тип представляющий пропсы того
 * компонента [2] в аннотации типа которого указан [1]. СТоит заметить что
 * указан он исключительно в образовательных целях.
 */

import React, {
    forwardRef,
    ForwardRefRenderFunction,
    RefObject,
    useRef,
    useImperativeHandle,
    MutableRefObject,
} from 'react';

interface FormProps {}
interface FormApi {
    reset: () => void;
}

type Ref<T> = Parameters<ForwardRefRenderFunction<T>>[1];

function Form(props: FormProps, ref: Ref<FormApi>) {
    /**[0] */
    let formRef = useRef() as RefObject<HTMLFormElement>;

    /**[1]          [2]     [3] */
    useImperativeHandle(
        ref,
        () => ({
            reset: () => formRef.current?.reset(),
        }),
        [] /**[4] */
    );

    return <form ref={formRef}></form>;
}

/**
 * [0] не забываем о необходимости явного преобразования.
 * Хук useImperativeHandle жидает в качестве первого параметра
 * ссылку [1], в качестве второго фабричную функцию [3] которая
 * будет переопредлелять объект api каждый раз при изменении
 * элементов массива ожидаемого в качестве третьего параметра [4].
 *
 */

const FormWithRef = forwardRef(Form);

const App = () => {
    /**[5]         [6]        [7] */
    let formRef = useRef() as MutableRefObject<FormApi>;

    /**[8] */
    formRef.current?.reset();

    /**[9] */
    return <FormWithRef ref={formRef} />;
};

/**
 * Необходимо помнить что ссылка предназначенная
 * для ассоцииации с функциональным компонентом
 * также требует явного преобразование [5] к обобщенному
 * типу MutableRefObject<T> [6] которому в качестве аргумента
 * типа необходимо установить тип представляющий открытое api
 * компонента [7]. И после создания экземпляра компонента определенного
 * с помощью функции forwardRef [9] можно использовать его api через
 * объект рефы [8].
 */

import React from 'react';

export interface TimerProps {}

export default function Timer(props: TimerProps) /**[0] */ {
    return <div>Is Timer!</div>;
}

/**
 * [0] отсутствие явного указания типа
 * возвращаемого типа, что для большинства
 * случаев является ппредпочтительным.
 */

import React, { ReactFragment, ReactNode } from 'react';

function A(): ReactFragment {
    return Promise.resolve(0); /**[0] */
}
function B(): ReactNode {
    return Promise.resolve(0); /**[0] */
}

/**
 * [0] Ok на этапе компиляции и
 * Error во время выполнения.
 */

/**[1] */
class T {
    constructor(readonly p: number) {}
}

function C(): ReactFragment {
    return new T(0); /**[2] */
}
function D(): ReactNode {
    return new T(0); /**[2] */
}

/**
 * [1] определение некоторого класса.
 * [2] Ok на этапе компиляции и
 * Error во время выполнения.
 */

/**[0] */
import React, { ReactEventHandler } from 'react';

function Form() {
    /**[1]                 [2]              [3]           [4] */
    const form_submitHandler: ReactEventHandler<HTMLFormElement> = (
        event
    ) => {
        event.preventDefault(); /**[5] */

        /**  [6]        [7]              [8] */
        let form = event.target as HTMLFormElement;
        form.reset(); /**[9] */
    };

    return (
        /**[10] */
        <form onSubmit={form_submitHandler}>
            <button type="submit">submit</button>
        </form>
    );
}

/**
 * [0] импорт обобщенного функционального типа
 * которому установив в качестве аргумента типа
 * тип нативного элемента HTMLFormElement [3]
 * использовали в аннотации типа [2] переменной
 * form_su0bmitHandler [1], которой в качестве
 * значения присвоили функцию слушатель события
 * единственный параметр которой не нуждается в
 * явной аннотации типа [4], поскольку вывод типов
 * операется на тип ReactEventHandler<T>.
 *
 * При возникновении события первым делом происходит
 * предотвращение поведения по умолчанию чтобы избежать
 * перезагрузки вкладки браузера [5]. Затем создается
 * переменная form [6] которой присваивается ссылка на
 * нативный dom элемент доступный через свойство определенное
 * в объекте события target [7] которое при помощи оператора
 * as приведено к нужному типу нативного dom элемента HTMLFormElement [8]
 *
 * На следующем шаге вызывается нативный метод сброса значений формы
 * reset [9]
 *
 * [10] установка слушателя событий React элементу form.
 *
 */

/**[0] */
import React, { FormEvent } from 'react';

function Form() {
    /**[1]      [2]           [3]          [4] */
    const form_submitHandler = (
        event: FormEvent<HTMLFormElement>
    ): void => {};

    return (
        <form onSubmit={form_submitHandler}>
            <button type="submit">submit</button>
        </form>
    );
}

/**
 * [0] импорт обобщенного типа FormEvent<T>
 * которому перед добавлением в аннотацию типа [2]
 * единственного параметра слушателя события [1]
 * необходимо установить в качестве аргумента типа
 * тип нативного dom элемента HTMLFormElement [3].
 * Указании типа к которому принадлежит возвращаемое
 * из слушателя события значения было указанно лишь
 * для того чтобы напомнить об отсутствии в этом необходимости.
 * Подобную работу нужно делегировать выводу типов.
 */

/**[0] */
import React, {
    useCallback,
    ReactEventHandler,
} from 'react';

function Form() {
    /**[1]                    [2]                       [3]*/
    const form_submitHandler = useCallback<
        ReactEventHandler<HTMLFormElement>
    >((event) => {}, [] /**[4] */);

    return (
        <form onSubmit={form_submitHandler}>
            <button type="submit">submit</button>
        </form>
    );
}

/**
 * [0] импорт универсальной функции useCallback<T>()
 * принимающей в качестве первого обязательного параметра
 * функцию [3], описание которой устанавливается в качестве
 * аргумента функционального типа [1]. D качестве второго
 * обязательного параметра ожидается массив [4] со значениями
 * изменение которых приводит переинициализации функции переданной
 * в качестве первого аргумента.
 */

/**[0] */
import React, { FC } from 'react';

/**[1]       [2] */
const Timer: FC = ({ children }) => <div>Is Timer!</div>;

/**
 * [0] импорт обобщенного типа FC<P>
 * который указан в аннотации без
 * установки аргумента типа [1] и
 * несмотря на это ошибки при деструктуризации
 * поля children не возникает даже без аннотации
 * типа первого параметра [2]
 */

import React, { FC } from 'react';

export interface TimerProps {
    duration: number;
    /**[0] */
}
/**[1]                     [3]*/
const Timer: FC<TimerProps> = ({ duration, children }) => (
    <div>Is Timer!</div>
);

export default Timer;

/**
 * [0] несмотря на то что тип представляющий
 * пропсы и указанный в качестве аргумента
 * типа FC<P> [1] не описывает поле children
 * при их деструктуризации ошибки не возникает [3]
 */

import React, { FC } from 'react';

export interface TimerProps {}

/**[1]   [2] */
const Timer: FC<TimerProps> = (props, ref) => (
    <div>Is Timer!</div>
);

/**
 * Первый параметр [0] выводится как
 * PropsWithChildren<TimerProps>, а
 * второй [2] как any, поскольку обобщенный
 * тип FC<P> не предусматривает его наличие.
 */

import React, {
    FC,
    forwardRef,
    ForwardRefRenderFunction,
} from 'react';

export interface TimerProps {}

/**[1] */
const Timer: ForwardRefRenderFunction<
    HTMLDivElement,
    TimerProps
> = (props, ref) => <div>Is Timer!</div>;

/**[2] */
const TimerWithRef = forwardRef(Timer);

export default TimerWithRef;

/**
 * [0] импорт типа для указания его в аннотации
 * функционального компонента [1] определяющего второй
 * параметр ref. После этого нет необходимости в явной
 * аннотации типов как обоих параметров функционального
 * компонента, так и универсальной функции forwardRef<T, P>().
 */

import React, { FC } from 'react';

const A: FC = () => 0123; // Error
const B: FC = () => '0123'; // Error
const C: FC = () => true; // Error
const D: FC = () => []; // Error

const E: FC = () => <div></div>; // Ok
const F: FC = () => <E />; // Ok
const G: FC = () => <></>; // Ok

import React, { MutableRefObject } from 'react';

export interface TimerProps {}

const Timer = (
    props: TimerProps,
    ref: MutableRefObject<HTMLDivElement>
) => 123;

// file CFC.ts

import React, {
    MutableRefObject,
    ReactNode,
    PropsWithChildren,
} from 'react';

/**[0][1]  [2]  [3][4]  [5]  [6]  [7]  [8]  [9]*/
export type CFC<
    P extends object = object,
    E extends HTMLElement = HTMLElement
> = (
    props: PropsWithChildren<P>,
    ref?: MutableRefObject<E>
) => ReactNode;

/**
 * [0] определяем обобщенный тип CustomDunctionComponent
 * или сокращенно CFC первый необязательный параметр представляющего
 * пропсы которого [1] расширяет [2] и устанавливает по умолчанию [3]
 * тип object. Второй необязательный параметр пердставляющий тип
 * нативного dom элемента [4] расширяет [5] и устанавливает
 * по умолчанию [6] тип HTMLElement.
 *
 * [7] устанавливаем принадлежность первого параметра функционального
 * типа к обобщенному типу PropsWithChildren<P> которому в качестве
 * аргумента типа передаем первый параметр типа.
 *
 * [8] определяем принадлежность второго необязательного параметра
 * к обобщенному типу MutableRefObject<E> которому в качестве
 * аргумента типа устанавливаем второй параметр типа.
 *
 * [9] тип возвращаемого значения определяем как ReactNode.
 *
 */

// file Timer.tsx
import React from 'react';
import { CFC } from './CFC'; /**[0] */

export interface TimerProps {}

/**[1]    [2]           [3]            [4]   [5]     [6]*/
const Timer: CFC<TimerProps, HTMLDivElement> = (
    props,
    ref
) => 123;

/**
 * [0] импорт CustomFunctionCOmponent для
 * указания его в качестве типа функционального
 * компонента определенного как Function Expression [1].
 * В качестве первого параметра типа устанавливается тип
 * представляющий пропсы [2], а в качестве второго тип нативного
 * dom элемента с которым будет ассоциирован объект реф [3].
 * При таком подходе отпадает необходимость в явном указании аннотации
 * типов как пропсов [4], так и рефы [5]. Кроме того возвращаемое
 * значение может принадлежать к любому типу совместимому с типом
 * ReactNode [6]
 */