vue/define-emits-declaration 스타일
작동 방식
이 규칙은 defineEmits의 타이핑 스타일을 강제하며, 이를 위해 타입 기반(type-based) 또는 엄격한 타입 리터럴(Vue 3.3에서 도입됨), 또는 런타임 선언을 사용해야 합니다.
이 규칙은 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