タイマー

要件

指定時間カウントダウン -> 0になったら指定時間カウントアップするタイマー

カウントダウン3秒、カウントアップ5秒なら「3, 2, 1, 0, 1, 2, ... 5」とする

設計

コンポーネントが必要とするプロパティ

1. カウントダウン秒数

2. カウントアップ秒数

3. 現在のカウントアップ秒(0スタート)

画面表示

カウントダウン秒数が0より上の時はカウントダウン秒数を表示、それ以外はカウントアップ秒数を表示

実装

プロパティの型

code:typescript

type Props = {

readonly beforeStart: number // => カウントダウン秒数

readonly countEnd: number // => カウントアップ秒数

readonly now: number // => 現在のカウントアップ秒

readonly handleNow: React.Dispatch<React.SetStateAction<number>> // => カウントアップ秒のsetState

readonly handleBefore: React.Dispatch<React.SetStateAction<number>> // => カウントダウン秒のsetState

children?: never // => childrenが無い事を明示

}