💦

ReactをTypeScriptで開発するときに躓いた話(レベル0.1の冒険者の話)

2022/11/01に公開約1,800字

●1))Age:部分の型の付け方で躓いた話
(<input type="number">に対する EventCallbackの型付けで躓いた話)

jsの時は発生しなかったエラーがTSで開発するとconst doChangeAgeのevent.target.valueの箇所で出る。
  const doChangeName = (event: ChangeEvent<HTMLInputElement>)=> {
    setName(() => event.target.value) 
  }
  const doChangeMail = (event: ChangeEvent<HTMLInputElement>)=> {
    setMail(() => event.target.value) 
  }
  const doChangeAge = (event: ChangeEvent<HTMLInputElement>)=> {
    setAge(() => event.target.value)
  }
参考; props に記述する EventCallbackの一覧
 onClick -------> event: React.MouseEvent<HTMLInputElement>
  onChange ------> event: React.ChangeEvent<HTMLInputElement>
  onkeypress ----> event: React.KeyboardEvent<HTMLInputElement>
  onBlur --------> event: React.FocusEvent<HTMLInputElement>
  onFocus -------> event: React.FocusEvent<HTMLInputElement>
  onSubmit ------> event: React.FormEvent<HTMLFormElement>
  onClickDiv ----> event: React.MouseEvent<HTMLDivElement, MouseEvent>

型を試行錯誤してもエラーが解消されなかったが、event.target.valueの値側をevent.target.valueAsNumberに変更することで解決。
えっそれだけ?という話ではあるがjsで動作していたので、値側を変更する案は浮かびにくかった。

対策後
  const doChangeName = (event: ChangeEvent<HTMLInputElement>)=> {
    setName(() => event.target.value) 
  }
  const doChangeMail = (event: ChangeEvent<HTMLInputElement>)=> {
    setMail(() => event.target.value) 
  }
  const doChangeAge = (event: ChangeEvent<HTMLInputElement>)=> {
    setAge(() => event.target.valueAsNumber)
  }

●2))setStateを引数に使った時の型付けで躓いた話

setStateの型付け
type HogeProps = state: string; setState: React.Dispatch<React.SetStateAction<string>> };

●3))<p>Hoge hoge...</p>を引数に使った時の型付けで躓いた話

jsxの型付け
type HogeProps = { msg: JSX.Element };

●4))childrenを引数に使った時の型付けで躓いた話

cildrenの型付け
type HogeProps = {children: ReactNode};

Discussion

ログインするとコメントできます