vue.js 版本3/ts/设置:导入要与defineEmits〈>和defineProps〈>一起使用的发射/属性类型

mwkjh3gx  于 2023-03-19  发布在  Vue.js
关注(0)|答案(2)|浏览(553)

知道如何导入EmitsProps接口并将它们与defineEmits<ImportedEmits>()defineProps<ImportedProps>()一起使用吗?
(Full示例见sfc.vuejs.org)
示例:
我有一个NumberFilter.ts,它提供了一般的发射和 prop 定义:

// NumberFilter.ts
export type NumberValue = number | null

export interface NumberEmits {
  (e: 'update:value', v: NumberValue): void
  (e: 'min:value', v: NonNullable<NumberValue>): void
  (e: 'max:value', v: NonNullable<NumberValue>): void
  (e: 'increase:value', v: NonNullable<NumberValue>): void
  (e: 'decrease:value', v: NonNullable<NumberValue>): void
}

export interface NumberProps {
  value?: NumberValue
  minValue?: NonNullable<NumberValue>
  maxValue?: NonNullable<NumberValue>
  stepValue?: NonNullable<NumberValue>
}

现在我想在实际组件中使用这些定义(例如RadiusFilter):

// RadiusFilter.vue
<script lang="ts" setup>
import type { NumberEmits, NumberProps } from './NumberFilter.ts'

const emit = defineEmits<NumberEmits>()
const props = withDefaults(defineEmits<NumberProps>(), {
  value: null,
  minValue: 0,
  maxValue: 50,
  stepValue: 5,
})
</script>

不幸的是,这不起作用,我得到以下错误:

Error: [@vue/compiler-sfc] type argument passed to defineEmits() must be a function type, a literal type with call signatures, or a reference to the above types.

Error: [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

www.example.com上的演示sfc.vuejs.org
可能值得一提的是,我是 typescript 新手。
也许我真的只是错过了一些非常,非常愚蠢的...

编辑:

在寻找解决方案的过程中,我从VUE文档中找到了以下部分,其中指出导入的类型目前在这种特定情况下不受支持,但“将来有可能支持它们”:
到目前为止,类型声明参数必须是下列参数之一,以确保正确的静态分析:

  • 类型文本
  • 对同一文件中的接口或类型文本的引用

当前不支持复杂类型和从其他文件导入类型。将来可能支持类型导入。
我仍然希望这个问题保持开放,因为有人可能已经找到了一个可用的变通方案,甚至可能是一个完全不同的解决方案类似的用例。

kqlmhetl

kqlmhetl1#

您应该查看vue-macroshttps://vue-macros.sxzz.moe/guide/getting-started.html
然后,您需要的是betterDefine宏,您可以使用它来更好地定义内容,如类型导入!
查看链接:https://vue-macros.sxzz.moe/features/better-define.html您应该查看所有异常
您可以在Vue和Nuxt的指南中找到如何执行此操作。此外,还值得查看用于捆绑器集成的unplugged-vue-marco:https://vue-macros.sxzz.moe/guide/bundler-integration.html

9avjhtql

9avjhtql2#

有一个open issue。作为一个解决方案,我声明了一个接口,扩展了我需要的接口。例如,在RadiusFilter组件中:

interface RadiusFilterEmits extends NumberEmits {}
const emit = defineEmits<RadiusFilterEmits>()

相关问题