ちょっとした小ネタなのですが、Vue3のComposition API + TypeScript環境でemitに型をつける方法を紹介します。
型がつかない記述方法
<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
setup(_, {emit}) {
const onClick = () => {
emit("update", 100) // updateが存在するのか、引数は何なのかわからない・・・
}
return {
onClick,
}
}
})
</script>
型をつける記述方法
<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
// emitsにemitを定義
emits: {
update: (value: number) => true, // 戻り値にtrueを返す関数を指定する
},
setup(_, {emit}) {
const onClick = () => {
emit("update", 100)
// emit("hoge") これはエラーになる
// emit("update", "a") 引数の型が一致しないのでこれもエラーになる
}
return {
}
}
})
</script>
ちょっとした設定ですが、emitの指定時にバッチリ型が推論されます。
やっぱり型があるっていいですよね!!!
最後までお読みいただき、ありがとうございました。
コメント