知道如何导入Emits
和Props
接口并将它们与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文档中找到了以下部分,其中指出导入的类型目前在这种特定情况下不受支持,但“将来有可能支持它们”:
到目前为止,类型声明参数必须是下列参数之一,以确保正确的静态分析:
- 类型文本
- 对同一文件中的接口或类型文本的引用
当前不支持复杂类型和从其他文件导入类型。将来可能支持类型导入。
我仍然希望这个问题保持开放,因为有人可能已经找到了一个可用的变通方案,甚至可能是一个完全不同的解决方案类似的用例。
2条答案
按热度按时间kqlmhetl1#
您应该查看
vue-macros
(https://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
9avjhtql2#
有一个open issue。作为一个解决方案,我声明了一个接口,扩展了我需要的接口。例如,在RadiusFilter组件中: