「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」の感想・備忘録3

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

posted with ヨメレバ

手島拓也/吉田健人/高林佳稀技術評論社 2022年07月25日頃

楽天ブックス

Amazon

Kindle

TypeScript
1. Enum
2. オプショナルチェーン演算子と非nullアサーション演算子
  1. ?.（オプショナルチェーン演算子）
  2. !.（非nullアサーション演算子）
React

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 Hoge