// foo.vue
interface SomeProps {
foo: number
}
export default (Vue as VueConstructor<Vue & SomeProps>).extend({
...
})
肥而菲尔
- 发布：2021-12-17 18:21
- 更新：2022-07-19 18:15
- 阅读：584
【报Bug】APP export default (Vue as VueConstructor<Vue & xx>).extend({...}) 形式导出的组件在真机无法渲染
分类：uni-app
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.01
HBuilderX类型： 正式
HBuilderX版本号： 3.2.16
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： HONOR ViewPad6
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
如上代码，真机调试
如上代码，真机调试
预期结果：
希望可以正常渲染组件；或者有可以避免ts报错更好的办法
希望可以正常渲染组件；或者有可以避免ts报错更好的办法
实际结果：
组件无法渲染
组件无法渲染
bug描述：
Vue2 + Typescript 的 uniapp 项目，组件渲染异常
代码如下：
// foo.vue
interface SomeProps {
foo: number
}
export default (Vue as VueConstructor<Vue & SomeProps>).extend({
...
})用上述形式导出的vue组件，在App真机调试时无法渲染，H5正常。
背景：
为了避免出现像图中的报错（声明不在data、computed等上定义的属性时ts会报如图的错。。。），所以用了以上的写法，结果出现了真机无法渲染的问题。
希望可以正常渲染组件；或者有可以解决类似ts报错问题，又不影响uniapp组件渲染的更好的办法。谢谢各位大佬！！
肥而菲尔 (作者)
终于发现了原因，真的吊诡，原因如下图：
详情链接：https://github.com/dcloudio/uni-app/blob/dev/packages/webpack-uni-mp-loader/lib/babel/scoped-component-traverse.js
大致原因就是 uniapp 在解析 "export default Vue.extend({components: {}})" 的时候判断了导出的变量名必须为 “Vue.extend”，改个名字都不行，不然就会导致引入的组件渲染异常。。不得不吐槽文档居然没半点信息。
知道原因这个问题就很好解决了，只有保证写的是 “Vue.extend” 即可。引入 Vue 的时候先定义个别名，再声明个变量 Vue 随便怎么操作都行。
举个例子：
import _Vue from 'vue'
const Vue = _Vue as AnyType
export default Vue.extend({...})
