関数コンポーネント（React.FC）
例
|
1 2 3 |
const App:React.FunctionalComponent = () => { return <div>Hello, React!</div>; } |
下記のようにすれば型引数を受け取れます。
|
1 2 3 4 5 6 7 8 |
interface AppProps { msg: string; } const App:React.FC<AppProps> = (props:AppProps) => { const { msg } = props; return <div>{ msg }</div>; } |
なお、関数コンポーネントのジェネリクスで型を指定するとpropsの方の型は省略することが可能になります。
|
1 2 3 4 5 6 7 8 |
interface AppProps { msg: string; } const App:React.FC<AppProps> = (props) => { const { msg } = props; return <div>{ msg }</div>; } |
これはdefaultPropsというコンポーネント内部でデフォルトのpropsの型という形で既に保持しているからの挙動になります。
useState
React HooksのuseStateは下記のように記述します。
|
1 |
const [value,setValue] = React.useState<number>(10); |
useStateの型を見てみると下記のようになっています。
|
1 |
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; |
React.Dispatch
React Hooks等でよく使われている型です。定義としては下記のようになっています。
|
1 |
type Dispatch<A> = (value: A) => void; |
「Aという型を指定して戻り値はない」という意味の関数になります。
React.SetStateAction
定義は下記のようになっています。
|
1 |
type SetStateAction<S> = S | ((prevState: S) => S); |
「何かしらのデータそのもの」もしくは「受け付けた引数の型を返す何かしらの関数」であるということを示します。
なので、このようにもかけますし、
|
1 2 3 |
const increment = () => { setValue(value + 1); } |
このように関数を渡すことも可能です。
|
1 2 3 |
const increment = () => { setValue((value) => value + 1); } |
useRef
useRefの型は下記のようになっています。
|
1 |
function useRef<T>(initialValue: T): MutableRefObject<T>; |
引数にinitialValue、戻り値にMutableRefObject<T>を取ります。
MutableRefObject<T>
このようなcurrentという要素を持つインターフェース（オブジェクト）になっています。
|
1 2 3 |
interface MutableRefObject<T> { current: T; } |
型は決まっていないのでnumberでもstringでも何でも渡せます。
useEffect
以下のような型になっています。
|
1 |
function useEffect(effect: EffectCallback, deps?: DependencyList): void; |
EffectCallback
コールバック関数です。レンダーする度にここで渡した関数の内容をuseEffectが実行してくれます。
|
1 |
type EffectCallback = () => (void | Destructor); |
引数はなく戻り値はvoid型またはDestructorを返します。
DependencyList
|
1 |
type DependencyList = ReadonlyArray<any>; |
ReadonlyArray<any>
かなり大きな型定義になっています。一言で言えば、型引数Tで構成されるreadonlyな配列になります。読み取り専用の型になるので値の更新ができません。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
interface ReadonlyArray<T> { /** * Gets the length of the array. This is a number one higher than the highest element defined in an array. */ readonly length: number; /** * Returns a string representation of an array. */ toString(): string; ・・・・・・・・中略・・・・・・・・ } |
input要素のref
input要素のrefは下記のようになっています。
|
1 2 3 |
interface ClassAttributes<T> extends Attributes { ref?: LegacyRef<T>; } |
LegacyRef
stringとRefのどちらかを取ることが可能です。一応、stringも取ることが可能ですが非推奨になっています。
|
1 |
type LegacyRef<T> = string | Ref<T>; |
Ref
RefObjectはuseRefで作られるオブジェクトを示しています。なのでinput要素のrefはuseRefの戻り値を取ることができます。
|
1 |
type Ref<T> = RefCallback<T> | RefObject<T> | null; |
useReducer
オーバーロードされて5つ位定義があるのですが、そのうちよく使われる型をご紹介します。
|
1 2 3 4 5 |
function useReducer<R extends Reducer<any, any>>( reducer: R, initialState: ReducerState<R>, initializer?: undefined ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; |
R extends Reducer<any,any>
Reducerの定義は以下のようになっています。
|
1 |
type Reducer<S, A> = (prevState: S, action: A) => S; |
extendsでReducerを継承しているのでReducerと互換性がないといけないという意味になります。
ReducerState<R>
ReducerStateは状態の型であることを示しています。
|
1 |
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never; |
この記事へのコメントはありません。