input type=rangeのonChangeイベントの引数eventを省略した場合の、IDEに怒られない引数の型

前提・実現したいこと

下記は2種あるinput type=rangeのname属性を取得し、name属性に応じてvalueをセットするサンプルです。
CodeSandBox

現状、次項のエラーが表示されているので、コードに手を加えてエラーが表示されないようにしたいです。

発生している問題・エラーメッセージ

Type '({ target }: changeRangeType) => void' is not assignable to type '(event: ChangeEvent<HTMLInputElement>) => void'.

Types of parameters '__0' and 'event' are incompatible.
Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'changeRangeType'.
The types of 'target.value' are incompatible between these types.
Type 'string' is not assignable to type 'number'.ts(2322)
index.d.ts(2045, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'
Quick Fix...

該当のソースコード

javascript
1type changeRangeType = {
2  target: {
3    name: string;
4    value: number;
5  };
6};
7
8export default function App() {
9  const [a, setA] = useState(0);
10  const [b, setB] = useState(0);
11  const changeRange = ({ target }: changeRangeType) => {
12    if (target.name === "a") return setA(target.value);
13    setB(target.value);
14  };
15
16  return (
17    <>
18      <p>A value {a}</p>
19      <input onChange={changeRange} type="range" name="a" />
20      <p>B value {b}</p>
21      <input onChange={changeRange} type="range" name="b" />
22    </>
23  );
24}

試したこと

エラーメッセージにならい、引数eventを省略せず、かつ引数eventにChangeEvent<HTMLInputElement>を付与したところ、setStateに下記のエラーが表示されました。

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'.ts(2345)

e.target.valueはnumberかと思いますが、「stringは入れられない」と怒られます。
また、エラーを回避するために引数eventを記述するのは本末転倒な気がするので、引数evenntを記述せず、省略できるものはできるだけ省略したいです。

行動規範の内容に同意します

回答1件

JavaScript
1const handler = (e: ChangeEvent<HTMLInputElement>) => {
2  ...

であってます。悪いのは string でしか返してくれない input （とそれを定めた W3C）です。parseInt を使いましょう。

投稿2020/12/21 18:51

A_kirisaki

総合スコア2853

erajera

2020/12/22 13:19

ご回答いただきありがとうございます。input rangeの返す値はstringのみ、というのは知らなかったので勉強になりました。引数のeventを省略して型を定義する方法をご教示いただけないでしょうか。理想はTypeScpritに怒られないためにコードを書く、というよりも最小限のコードをに対してTypeScpritを添える、という形でコードを書きたいです。