Copy & Paste Engineer

【React + TypeScript】イベントから型を指定して渡す方法

【React + TypeScript】イベントから型を指定して渡す方法

Material UI を使用している際 onChange イベント時にせっかく TypeScript を使用しているのに unknown の型指定しか出来なかったため、対策時のメモ

環境

onChangeイベントから受け取る（失敗例

Material UIのページの通りにすると value: unknown と型指定ができません。 React Select component - Material UI

import { FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
import React from "react";

const App = () => {
  const [age, setAge] = React.useState("");
  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setAge(event.target.value as string);
  };

  return (
    <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Age</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        label="Age"
        onChange={handleChange}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  );
};

export default App;

型を指定して渡す（成功例

onChange={(e) => handleChange(e.target.value as string)} と変更して handleChange 実行前に string型とすることで unknown を避けることができます。

import { FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
import React from "react";

const App = () => {
  const [age, setAge] = React.useState("");
  const handleChange = (value: string) => {
    setAge(value);
  };

  return (
    <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Age</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        label="Age"
        onChange={(e) => handleChange(e.target.value as string)}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  );
};

export default App;

参考