🫐

Svelteのon:changeの型

2023/11/11に公開

コード

<script lang="ts" strictEvents>
	const options = [
		{
			id: 1,
			name: '項目1'
		},
		{
			id: 2,
			name: '項目2'
		}
	];
	const handleChange = (event: { currentTarget: HTMLSelectElement }) => {
		const value = event.currentTarget.value;
		console.log({ value });
	};
</script>

<select on:change={handleChange}>
	{#each options as option (option.id)}
		<option value={option.id}>{option.name}</option>
	{/each}
</select>

currentTargetの型をHTMLInputElementに変更してみるとselect要素の部分に型エラーが発生します。
間違って指定してしまってもエラーになってくれるので安心ですね。

もっと詳しく知りたい方はSvelteのドキュメントもしくは
ryoppippiさんの記事
が参考になります。

Discussion