导出的vue模块声明文件和项目中的冲突
BTBMan opened this issue · comments
引用指定的 external-css
下的 common.min.js
文件 自定义了声明文件后就好了 不过只能声明为 any
类型 不然会报emit事件类型错误
能提供一个简单的repo吗? 我研究一下这个问题。
好的 有时间我弄一个repo
@XiongAmao issue-demos 我创建了一个复现的demo 您看一下
@BTBMan 不好意思,回复晚了。
我试了下,大概情况是这样。
首先,来自node_modules的依赖的类型声明,是由依赖自己提供的d.ts决定的
// 从依赖包引入
import VueEasyLightbox from 'VueEasyLightbox'
// or
import { Button } from 'ant-design-vue'
// 类型被依赖内的d.ts 提前定义好
之所以要提供下面这样的声明,是因为打包好的vue3组件的d.ts还不能提供完美的组件props类型支持,或者说通过tsc导出的d.ts没法做到。目前 vant 也是这么做的。
没记错的话,tsx 是由react和ts团队一同解决的,vue3是后来者,vue与react有蛮大的区别。
// 通过自定义props类型,来实现外部依赖的类型补充
declare module 'vue' {
interface ComponentCustomProps {
//
onAbc?: () => void
}
}
export {}
上述做法是提供给外部d.ts类型文件的的补充,所以在本地项目中 components/VueEasyLightBox.tsx
导出的组件的props 并不能通过 vue.d.ts
(你项目中的)来补充类型
正确做法是,在所有项目中的组件(.tsx) 中补全 props的类型:
export default defineComponent({
props: {
onAbc: {
type: Function // 给你的组件声明一个props
}
},
setup(_props, { emit }) {
return () => (
<div class="vue-easy-lightbox-demo">
<button
onClick={() => {
emit('close')
}}
>
Click me
</button>
</div>
)
}
})
具体的类型可以参考官方文档: https://v3.vuejs.org/guide/typescript-support.html#annotating-props