React（Next.js）、Typescriptでcheckboxのchangeイベントを使うときの注意点

React（Next.js）、TypeScript にてcheckboxのchangeイベントを扱うときに、エラーが出たので、解決方法をメモしておきます。

エラーの内容

Argument of type 'string' is not assignable to parameter of type 'boolean'.

修正したコード

handleChangeCheckedメソッドの引数を、e.target.valueからe.target.checkedに修正しました。

子のコンポーネント

inputCheckboxChild.tsx

import React from 'react'
interface InputProps {
  checked: boolean
  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}
export const InputCheckboxChild = ({ checked, handleChange }: InputProps) => {
  return (
    <>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => handleChange(e)}
      />
    </>
  )
}

親

inputCheckboxParent.tsx

import React, { useState } from 'react'
import { InputCheckboxChild } from '../components/InputCheckboxChild'

export default function Test() {
  const [checkedData, setCheckedData] = useState(false)
  const handleChangeChecked = (chk: boolean) => {
    setCheckedData(chk)
  }
  return (
    <div>
      <InputCheckboxChild
        checked={checkedData}
        handleChange={(e) => handleChangeChecked(e.target.checked)}
      />
    </div>
  )
}

type="text"の時には、value属性を指定しせずにe.target.valueを使っていたために解決に時間がかかりました。