网站搜索

typescript - 使用 Options API 为 vue 3 的 emits 定义类型


在 Vue 3 Options API 中,有没有一种方法可以像在 Composition API 中那样输入 emits?根据 Composition API 的方式(文档):

<script setup lang="ts">
// type-based
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

但对于 Options API,我们只有有效负载验证(文档):

emits: {
    addBook(payload: { bookName: string }) {
      // perform runtime validation
      return payload.bookName.length > 0
    }
  }

因此,如果我们不需要验证,eslint 会将参数视为未使用:

emits: {
    change: (id: number) => true // 'id' is defined but never used
}

答案#1

可以添加一个忽略注释来消除警告:

// eslint-disable-next-line no-unused-vars @typescript-eslint/no-unused-vars
change: (id: number) => true

或者对 id 实现一个简单的验证:

change: (id: number) => typeof id === 'number'

答案#2

你可以使用类型断言,TypeScript 在类型定义中不会抛出错误:

emits: {
  change: (() => true) as (id: number) => void
}

我知道这是老话题,但也许对某些人仍然有用。