Vue3 Compotion API + TypeScriptでemitに型をつける方法

ちょっとした小ネタなのですが、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の指定時にバッチリ型が推論されます。
やっぱり型があるっていいですよね!!!

最後までお読みいただき、ありがとうございました。