型参照

Reactは、高度なReactパターンを型付けする際に役立つ可能性のある、いくつかのユーティリティ型をエクスポートしています。前のセクションで、いくつかの型を見てきました。以下は、これらの各型の完全なリファレンスと、それらの使用方法/場所に関するいくつかの例です。

これらの型はすべて、reactモジュールから名前付き型としてエクスポートされています。Reactオブジェクトのメンバーとして（例：React.Node）アクセスしたい場合、ReactをESモジュールとしてインポートしている場合は、Reactを名前空間としてインポートする必要があります。

import * as React from 'react';

CommonJSを使用している場合は、Reactをrequireすることもできます。

const React = require('react');

ESモジュール環境またはCommonJS環境のいずれかで、名前付き型インポートを使用することもできます。

import type {Node} from 'react';

次のリファレンスでは、すべてを次のようにインポートした場合として、すべての型を参照します。

import * as React from 'react';

注意： Reactをデフォルトインポートでインポートすることはできますが
import React from 'react';
Reactがエクスポートするすべての値にアクセスできますが、以下にドキュメント化されている型にはアクセスできません。これは、デフォルトエクスポートは（数値のような）任意の値になる可能性があるため、Flowがデフォルトエクスポートに型を追加しないためです。Flowは、エクスポートされた名前付き型をES名前空間オブジェクトに追加します。これは、import * as React from 'react'で取得できます。これは、Flowがエクスポートされた型と同じ名前で値をエクスポートする場合を認識しているためです。
繰り返しますが、Reactをimport React from 'react'でインポートすると、React.Component、React.createElement()、React.ChildrenなどのJavaScriptの値にアクセスできます。ただし、React.Node、React.ChildrenArrayなどのFlowの型にはアクセスできません。デフォルトインポートに加えて、import type {Node} from 'react'のような名前付き型インポートを使用する必要があります。

`React.Node`

これは、Reactアプリケーションでレンダリングできる任意のノードを表します。React.Nodeは、null、ブール値、数値、文字列、React要素、またはそれらのいずれかの型の配列（再帰的）にすることができます。

React.Nodeは、関数コンポーネントとクラスのrenderメソッドの戻り値の型を注釈するのに適したデフォルトです。コンポーネントが子として受け取る要素を型付けするためにも使用できます。

これは、関数コンポーネントの戻り値の型として使用されているReact.Nodeの例です

function MyComponent(props: {}): React.Node {
  // ...
}

クラスのrenderメソッドの戻り値の型としても使用できます

class MyComponent extends React.Component<{}> {
  render(): React.Node {
    // ...
  }
}

これは、子に対するprop型としてのReact.Nodeの例です

function MyComponent({ children }: { children: React.Node }) {
  return <div>{children}</div>;
}

すべてのreact-dom JSX組み込みには、子型としてReact.Nodeがあります。<div>、<span>など、すべて。

`React.MixedElement`

すべてのReact要素の最も一般的な型（すべての値に対するmixedに類似）。React.MixedElementは、React.Element<React.ElementType>として定義されます。

この型の一般的なユースケースは、要素の詳細を隠す型で要素を注釈したい場合です。例：

const element: React.MixedElement = <div />;

`React.Element<typeof Component>`

React要素は、JSX要素の値の型です

const element: React.Element<'div'> = <div />;

React.Element<typeof Component>は、React.createElement()/React.jsx()の戻り値の型でもあります。

React.Elementは、単一の型引数typeof Componentを取ります。typeof Componentは、React要素のコンポーネント型です。組み込み要素の場合、typeof Componentは使用した組み込みの文字列リテラルになります。以下に、DOM組み込みの例をいくつか示します

<div /> as React.Element<'div'>; // OK
<span /> as React.Element<'span'>; // OK
<div /> as React.Element<'span'>; // Error: div is not a span.

typeof Componentは、Reactのクラスコンポーネントまたは関数コンポーネントにすることもできます。

function Foo(props: {}) {}
class Bar extends React.Component<{}> {}

<Foo /> as React.Element<typeof Foo>; // OK
<Bar /> as React.Element<typeof Bar>; // OK
<Foo /> as React.Element<typeof Bar>; // Error: Foo is not Bar

typeofに注意してください。必須です。値Fooの型を取得する必要があります。Foo as Fooは、Fooを型として使用できないため、エラーになります。したがって、Foo as typeof Fooが正しいです。

typeofなしのBarは、Barのインスタンスの型になります：new Bar() as Bar。Barのインスタンスの型ではなく、Barの型が必要です。Class<Bar>もここで機能しますが、関数コンポーネントとの一貫性のため、typeofを推奨します。

`React.ChildrenArray<T>`

Reactの子配列は、単一の値または任意のレベルにネストされた配列にすることができます。React.Children APIで使用するように設計されています。

たとえば、React.ChildrenArray<T>から通常のJavaScript配列を取得したい場合は、次の例を参照してください

import * as React from 'react';

// A children array can be a single value...
const children: React.ChildrenArray<number> = 42;
// ...or an arbitrarily nested array.
const children: React.ChildrenArray<number> = [[1, 2], 3, [4, 5]];

// Using the `React.Children` API can flatten the array.
const array: Array<number> = React.Children.toArray(children);

`React.AbstractComponent<Config, Instance>`

React.AbstractComponent<Config, Instance>は、Config型の構成とInstance型のインスタンスを持つコンポーネントを表します。

コンポーネントのConfigは、そのコンポーネントで要素を作成するためにJSXに渡す必要があるオブジェクトの型です。コンポーネントのInstanceは、JSXのrefプロップに渡されるrefオブジェクトのcurrentフィールドに書き込まれる値の型です。

Configは必須ですが、Instanceはオプションであり、デフォルトはmixedです。

構成Configを持つクラスまたは関数コンポーネントは、React.AbstractComponent<Config>を期待する場所で使用できます。

これは、ReactコンポーネントのFlowの最も抽象的な表現であり、HOCとライブラリ定義を記述するのに最も役立ちます。

`React.ComponentType<Config>`

これは、React.AbstractComponentと同じですが、最初の型引数のみを指定します。

`React.ElementType`

React.AbstractComponent<Props>に似ていますが、JSX組み込み（文字列）も含まれています。

React.ElementTypeの定義はほぼ次のとおりです

type ElementType =
  | string
  | React.AbstractComponent<empty, mixed>;

`React.Key`

React要素のkeyプロップの型。文字列と数値の結合であり、次のように定義されます

type Key = string | number;

`React.Ref<typeof Component>`

React要素のrefプロップの型。React.Ref<typeof Component>は、文字列、refオブジェクト、またはref関数にすることができます。

ref関数は、React.ElementRef<typeof Component>を使用して取得される要素インスタンス、またはReactがアンマウント時にnullをref関数に渡すため、nullになる1つの引数のみを取ります。

React.Element<typeof Component>と同様に、typeof ComponentはReactコンポーネントの型である必要があるため、React.Ref<typeof MyComponent>のようにtypeofを使用する必要があります。

React.Ref<typeof Component>の定義はほぼ次のとおりです

type Ref<C> =
  | string
  | (instance: React.ElementRef<C> | null) => mixed;
  | { -current: React$ElementRef<ElementType> | null, ... }

`React.PropsOf<Component>`

コンポーネント構文を使用してComponentが記述されている場合、React.PropsOf<Component>は、JSXでComponentをインスタンス化するために渡す必要があるオブジェクトの型を指定します。重要なことに、デフォルトを持つpropsは、結果の型ではオプションです。

例：

1import * as React from 'react';2
3component MyComponent(foo: number, bar: string = 'str') {4  return null;5}6
7// Only foo is required8({foo: 3}) as React.ElementConfig<typeof MyComponent>;

`React.ElementConfig<typeof Component>`

React.PropsOfと同様に、このユーティリティは、createElement()またはjsx()を介してコンポーネントをインスタンス化するためにコンポーネントに渡す必要のあるオブジェクトの型を取得します。PropsOfはコンポーネント構文を使用する際に便利なコンポーネントの要素を受け取りますが、ElementConfigは代わりにコンポーネントの型を受け取ります。typeof ComponentはReactコンポーネントの型である必要があるため、React.ElementConfig<typeof Component>のようにtypeofを使用する必要があります。

重要な点として、デフォルト値を持つpropsは、結果の型ではオプションになります。

例:

import * as React from 'react';

class MyComponent extends React.Component<{foo: number}> {
  static defaultProps = {foo: 42};

  render() {
    return this.props.foo;
  }
}

// `React.ElementProps<>` requires `foo` even though it has a `defaultProp`.
({foo: 42}) as React.ElementProps<typeof MyComponent>;

// `React.ElementConfig<>` does not require `foo` since it has a `defaultProp`.
({}) as React.ElementConfig<typeof MyComponent>;

React.Element<typeof Component>と同様に、typeof ComponentはReactコンポーネントの型である必要があるため、React.ElementProps<typeof MyComponent>のようにtypeofを使用する必要があります。

`React.ElementProps<typeof Component>`

注：React.ElementPropsはdefaultPropsのオプション性を保持しないため、React.ElementConfig（こちらは保持する）の方がより適切な選択肢となることが多く、特に高階コンポーネントのようにpropsを単純にパススルーする場合に便利です。ElementPropsはおそらく使用すべきではありません。

React要素型のpropsを、defaultPropsのオプション性を保持せずに取得します。typeof Componentは、Reactのクラスコンポーネント、関数コンポーネント、またはJSX組み込み文字列の型である可能性があります。この型は、React.Element<typeof Component>のpropsプロパティに使用されます。

`React.RefOf<Component>`

コンポーネント構文を使用する場合、React.RefOf<Component>はコンポーネントのrefプロパティのcurrentフィールドの型を提供します。コンポーネントにrefプロパティがない場合は、voidを返します。

`React.ElementRef<typeof Component>`

React要素のインスタンス型を取得します。インスタンスは、さまざまなコンポーネント型によって異なります。

React.AbstractComponent<Config, Instance>は、Instance型を返します。
Reactクラスコンポーネントはクラスインスタンスになります。したがって、class Foo extends React.Component<{}> {}があり、React.ElementRef<typeof Foo>を使用した場合、型はFooのインスタンスになります。
React関数コンポーネントはバッキングインスタンスを持たないため、React.ElementRef<typeof Bar>（Barがfunction Bar() {}の場合）はvoid型を返します。
divのようなJSX組み込みは、そのDOMインスタンスを提供します。React.ElementRef<'div'>の場合、HTMLDivElementになります。React.ElementRef<'input'>の場合はHTMLInputElementになります。

React.Element<typeof Component>と同様に、typeof ComponentはReactコンポーネントの型である必要があるため、React.ElementRef<typeof MyComponent>のようにtypeofを使用する必要があります。

`React.Config<Props, DefaultProps>`

propsとデフォルトpropsから構成オブジェクトを計算します。これは、構成を抽象化するHOCを注釈する場合に最も役立ちます。詳細については、HOCの作成に関するドキュメントを参照してください。

React.Node​

React.MixedElement​

React.Element<typeof Component>​

React.ChildrenArray<T>​

React.AbstractComponent<Config, Instance>​

React.ComponentType<Config>​

React.ElementType​

React.Key​

React.Ref<typeof Component>​

React.PropsOf<Component>​

React.ElementConfig<typeof Component>​

React.ElementProps<typeof Component>​

React.RefOf<Component>​

React.ElementRef<typeof Component>​

React.Config<Props, DefaultProps>​