TypeScript
Enum
enum Direction {
Up,
Down,
Left,
Right
}
const direction: Direction = Direction.Left // 2が代入される文字列ベースのEnum型を定義することも可能。
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
const direction: Direction = Direction.Down // 'DOWN'が代入されるオプショナルチェーン演算子と非nullアサーション演算子
?.（オプショナルチェーン演算子）
nullish(null または undefined)な場合、?.の時点でundefinedを返却するためエラーにはならない。
オプショナルチェーン演算子が入った式を変数に格納した場合、その変数のデータ型は必ず「xxx | undefined」になる。
これはTypeScriptではなくJavaScriptの機能である。console.log(user?.name) // string | undefined
!.（非nullアサーション演算子）
nullishの可能性のあるプロパティがnullishではないことをコンパイラーに保証してあげる。
あくまでコンパイルに教えるだけなので、実行時にエラーが起きる可能性もある。
これはTypeScriptの機能である。console.log(user!.name) // string
React
Reactにおける型
関数コンポーネントは任意のオブジェクトをpropsとして受け取り、JSX.Element型を返す関数である。
（Next.jsの場合はNextPage型を指定する）
※ 型推論されるので、戻り値のJSX.Elementは省略することも多い
※ childrenの型はReact.ReactNodeである
type HogeProps = {
children: React.ReactNode,
title: String
}
const Hoge = (props: HogeProps): JSX.Element => {
const {children, title} = props
return <p>{title}: {children}</p>
}
export default Hogeコンポーネントの型にFCまたはVFCを指定する記述方法もあるが、使われない傾向にある。const Hoge: React.FC<HogeProps> = (props) => {}
useReducer
useStateよりも複雑な状態を管理する場合に使う。
配列やオブジェクトなどの複数データをまとめたものを状態として扱う場合に用いられることが多い。
状態を更新するための関数=reducerを定義し、useReducer()で取得したdispatch関数を使ってreducerを呼び出す。
「useReducer()の戻り値の配列の2番目=dispatch関数」にactionを渡すことで状態を更新することができる。
（useStateでは更新関数に次の状態を渡すが、useReducerでは更新関数にactionを渡す）
import { useReducer } from 'react'
type Action = {type: 'DECREMENT', payload: string} | {type: 'INCREMENT'}
// reducer関数は第1引数に現在の状態、第2引数にactionを受け取り、次の状態を返す
const reducer = (currentCount: number, action: Action): number => {
switch (action.type) {
case 'DECREMENT':
console.log(action.payload)
return currentCount - 1
case 'INCREMENT':
return currentCount + 1
}
}
const Hoge = (): JSX.Element => {
// useReducerの第1引数はreducer関数、第2引数は初期値
const [count, dispatch] = useReducer(reducer, 0)
return (
<div>
<p>count: {count}</p>
<button onClick={() => dispatch({type: 'DECREMENT', payload:'hoge'})}>-</button>
<button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
</div>
)
}
export default HogeusrDebugValueフック
import { usrDebugValue } from 'react'
としてusrDebugValue(`state: ${state}`)
のようにするとReact Developer Toolsに出力される。
コメント