vue/define-emits-declaration スタイル
何をするのか
このルールは、defineEmits の型定義スタイルを強制します。type-based、厳密な type-literal（Vue 3.3 で導入）、または runtime 宣言を使用する必要があります。このルールは、setup スクリプトおよび lang="ts" の場合にのみ有効です。
なぜ問題なのか
不一致なコードスタイルは混乱を引き起こし、コードの読みにくさを増します。
例
このルールに対して誤りの例：
vue
// "vue/define-emits-declaration": ["error", "type-based"]
<script setup lang="ts">
const emit = defineEmits(["change", "update"]);
const emit2 = defineEmits({
change: (id) => typeof id === "number",
update: (value) => typeof value === "string",
});
</script>
// "vue/define-emits-declaration": ["error", "type-literal"]
<script setup lang="ts">
const emit = defineEmits<{
(e: "change", id: number): void;
(e: "update", value: string): void;
}>();
</script>
// "vue/define-emits-declaration": ["error", "runtime"]
<script setup lang="ts">
const emit = defineEmits<{
(e: "change", id: number): void;
(e: "update", value: string): void;
}>();
</script>このルールに対して正しい例：
vue
// "vue/define-emits-declaration": ["error", "type-based"]
<script setup lang="ts">
const emit = defineEmits<{
(e: "change", id: number): void;
(e: "update", value: string): void;
}>();
const emit2 = defineEmits<{
change: [id: number];
update: [value: string];
}>();
</script>
// "vue/define-emits-declaration": ["error", "type-literal"]
<script setup lang="ts">
const emit = defineEmits<{
change: [id: number];
update: [value: string];
}>();
</script>
// "vue/define-emits-declaration": ["error", "runtime"]
<script setup lang="ts">
const emit = defineEmits<{
(e: "change", id: number): void;
(e: "update", value: string): void;
}>();
const emit2 = defineEmits({
change: (id) => typeof id === "number",
update: (value) => typeof value === "string",
});
</script>設定
このルールは以下の文字列値のいずれかを受け付けます。
"type-based"
defineEmits への引数として名前付きの TypeScript 型またはインターフェースを使用することを強制します。例：defineEmits<MyEmits>()。
"type-literal"
defineEmits への引数としてインラインの型リテラルを使用することを強制します。例：defineEmits<{ (event: string): void }>()。
"runtime"
実行時宣言を使用することを強制します。発火イベントは配列またはオブジェクトを使って宣言され、例：defineEmits(['event1', 'event2'])。
使い方
設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：
json
{
"plugins": ["vue"],
"rules": {
"vue/define-emits-declaration": "error"
}
}bash
oxlint --deny vue/define-emits-declaration --vue-plugin