lit-html や React などを使うときの input の変更を監視して変数と同期させる場合の話

変更イベント時に input などから取得した値はすべて文字列型
最終的に数値や日付型などにしたいので変数側は数値など本来の型で保存したい
だけど 毎回変換して代入は面倒
一応 input に valueAsNumber や valueAsDate もあるけど 空文字列の扱いなど思い通りにならなくて多少手を加えるので 結局ただの value で受け取ってる
それに render 時の input の value には文字列で指定が必要
数値ならそのままでもいいけど 日付は指定のフォーマットの文字列化が必須
処理が増える上に 不可逆な変換になるケースもある

いろいろ試したけどやっぱり フォームパーツと対応付ける部分は文字列として保持するのがベストな気がする
最初に取得してきたときに文字列化して 最後に POST するときなどに数値型等に変換

const values = {
	form: {
		num: "",
		date: "",
	},
	...
}

const init = (current) => {
	values.form.num = String(current.num)
	values.form.date = lib.dateFormat("yyyy-MM-dd", current.date)
}

const update = ({ form }) => {
	render(
		html`
			<input type="number" value=${form.num} oninput=${...} />
			<input type="date" value=${form.date} oninput=${...} />
		`,
		document.body
	)
}

const post = () => {
	const num = ~~values.form.num
	const date = new Date(values.form.date)
	const body = JSON.stringify({ num, date })

	// fetch(...)
}

update(values)