はじめに
型って難しい・・・。
本論
画面上にボタンを表示し、クリックするとコンソールにvalueの値（test）を表示するだけのコードです。
VS codeで書きます。
（VS codeで型推論を利用するため。）
App.tsx
function App() {
const checkEventType = (e) => {
console.log(e.target.value);
}
return (
<div className="App">
<button type="button" value="test" onClick={checkEventType}>Click me</button>
</div>
);
}
この状態でボタンをクリックすると、下記エラーが発生します。
Parameter 'e' implicitly has an 'any' type.
5 | function App() {
6 |
> 7 | const checkEventType = (e) => {
| ^
8 | console.log(e.target.value);
9 | }
10 |
イベント（e）に型が指定されていないことが原因です。
明示的にany型を設定すると、問題なく動くようになります。
App.tsx
function App() {
const checkEventType = (e:any) => {
console.log(e.target.value);
}
return (
<div className="App">
<button type="button" value="test" onClick={checkEventType}>Click me</button>
</div>
);
}
ただし、イベントにもEvent型というものが存在します。
コードを書き換えます。
App.tsx
function App() {
const checkEventType = (e) => {
console.log(e.target.value);
}
return (
<div className="App">
{/* 一旦関数を外します。 */}
<button type="button" value="test" onClick={(event) => { }}>Click me</button>
</div>
);
}
eventにマウスオーバーすると、下記の通り型が推測されます。
これをイベントの型に指定します。
App.tsx
function App() {
const checkEventType = (e:React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e.target.value);
}
return (
<div className="App">
{/* 再度関数を指定します。 */}
<button type="button" value="test" onClick={checkEventType}>Click me</button>
</div>
);
}
この状態で再びボタンをクリックすると、今度は下記エラーが発生します。
TS2339: Property 'value' does not exist on type 'EventTarget'.
2 |
3 | const checkEventType = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
> 4 | console.log(e.target.value);
| ^^^^^
5 | }
6 |
7 | return (
これはEventTarget型にvalueプロパティがないことが原因なので、型アサーションで対応します。
App.tsx
function App() {
const checkEventType = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
// 型アサーションでHTMLButtonElementに変換
console.log((e.target as HTMLButtonElement).value);
}
return (
<div className="App">
<button type="button" value="test" onClick={checkEventType}>Click me</button>
</div>
);
}
この状態でボタンをクリックすると、問題なく動作します。