【Vue3】defineModel に Union 型や独自の型を付けたい

2024-02-28

TL; DR

引数の方で指定する

const model = defineModel<string | number>();

defineModelに明示的に型を教えないとESLintに怒られる

公式の v-model サンプルの通りにdefineModelを使うと、
ESLintに「Prop "modelValue" should define at least its type.」と怒られる。

const model = defineModel(); // Prop "modelValue" should define at least its type.

そしてdefineModel()のドキュメントには
以下のように型指定されたサンプルが載っている。

const model = defineModel({ type: String });

……なんか頭文字が大文字のStringが指定されてますね

これUnion型も独自定義した型も指定できないよ~~

もしかして型引数指定できるんじゃね

できたわ

const model = defineModel<string | number>();

てかVueのソース見てみたらちゃんとTypeScriptでの使用例コメントされてたわ

https://github.com/vuejs/core/blob/1f6a1102aa09960f76a9af2872ef01e7da8538e3/packages/runtime-core/src/apiSetupHelpers.ts#L242-L258

なんでこれをドキュメントに書いてないんだよ!!

スポンサーリンク