ReactのTypeScript向けの型定義

HOCやrender propsを自作する時に必要になりそうな型を列挙しておく.

React.Component

class componentを作る時に使われるES2015 Class

ただのクラスなのでnew React.Componentのようにnew演算子を使ってインスタンスを作成できる

TypeScriptではクラスはそのインスタンスの値を表す型を持つので, let Component: React.Component = new React.Component(...)のように型注釈が現れる場所にも書ける

class MyComponent extends React.Componentのように継承してユーザ定義コンポーネントを作るために利用する

具体例: const C: React.Component = new React.Component(...)

React.ComponentClass

React.Componentクラス (インスタンスではない) はReact.ComponentClass型の部分型

つまりReact.ComponentクラスをReact.ComponentClassの変数に代入できる

具体例: const CC: React.ComponentClass = React.Component

React.FunctionComponent

具体例: const FC: React.FunctionComponent = (props: {}) => <div />

React.ComponentType

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>

React.ReactElement

Reactの仮想DOMにおける要素を表す型

HTMLElementに対応すると思えば良い

type, props, keyの3つのプロパティを持つ

React.createElement('div', { className: 'my-elem' }, 'Hello.')で作成できる

JSXでは<div className="my-elem">Hello.</div>に対応

https://gyazo.com/55527e8b136e960f94dad5beb1287e2a