导出的vue模块声明文件和项目中的冲突

[John Won]

您好

插件里的types/types/tsx.shim.d.ts声明文件和项目中的自定义vue的ComponentCustomProps冲突

项目中声明的不生效了 被覆盖了？

项目中报类型错误

[John Won]

引用指定的 external-css 下的 common.min.js文件 自定义了声明文件后就好了 不过只能声明为 any 类型 不然会报emit事件类型错误

[XiongAmao]

能提供一个简单的repo吗？ 我研究一下这个问题。

[John Won]

好的 有时间我弄一个repo

[John Won]

@XiongAmao issue-demos 我创建了一个复现的demo 您看一下

[XiongAmao]

@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