Типы компонентов

Типы компонентов имеют синтаксис, похожий на наш синтаксис компонентов времени выполнения (синтаксис компонентов), что упрощает описание типа компонента. Типы компонентов наиболее полезны при написании определений библиотек.

Указание свойств​

Чтобы объявить тип компонента, можно использовать ключевое слово component и перечислить свойства, которые ожидает компонент.

import * as React from 'react';


type ComponentType = component(numberProp: number, optionalProp?: string);


declare const Component: ComponentType;


<Component numberProp={3} />; // OK! optionalProp is optional

Как и синтаксис компонентов, типы компонентов также поддерживают параметр rest:

import * as React from 'react';


type StarProps = {color: string, size: number};


// The ...StarProps rest parameter spreads in every prop of StarProps, so
// BlueStarType accepts specificProp plus color and size.
type BlueStarType = component(specificProp: string, ...StarProps);

Как и в синтаксисе компонентов, можно также объявить встроенное свойство ref (но не в параметре rest):

import * as React from 'react';
import {useRef} from 'react';


type ComponentWithRef = component(someProp: number, ref: React.RefSetter<number>);


declare const Component: ComponentWithRef;


component Example() {
    const ref = useRef<number | null>(null);
    return <Component someProp={42} ref={ref}/>;
}

Указание типов рендеринга​

Также можно указать тип рендеринга компонента, как и в синтаксисе компонентов.

import * as React from 'react';


component Foo() { return null }
type ComponentWithRenders = component() renders Foo;


declare const Component: ComponentWithRenders;
<Component /> as renders Foo; // OK!

Полиморфные типы компонентов​

Также можно записывать полиморфные типы компонентов, что удобно для объявления «прозрачных» компонентов:

import * as React from 'react';


declare const TransparentComponent: component<T extends React.Node>(children: T) renders T;


component Example() { return null }


const element: renders Example = (
    <TransparentComponent>
        <Example />
    </TransparentComponent>
); // OK!

Аннотирование компонентов типами компонентов​

Вот как можно описать тип компонента, написанного с использованием синтаксиса компонентов, с помощью типа компонента:

import * as React from 'react';


component Foo() { return null }


component Example(someProp: number, ref: React.RefSetter<number>) renders Foo {
    return <Foo />;
}


Example as component(someProp: number, ref: React.RefSetter<number>) renders Foo; // OK!




component PolymorphicExample<T extends React.Node>(children: T) renders T {
    return children;
}


PolymorphicExample as component<T extends React.Node>(children: T) renders T; // OK!

См. также​

• Обобщения — параметры обобщённых типов, используемые в сигнатурах типов компонентов
• Определения библиотек — объявление типов компонентов в файлах определений библиотек