vue3+typescript实战记录一

Posted 2023-03-19

参考技术A 本文记录一些vue3+ts+less开发过程中的一些小问题。
不断开发、不断更新...

新建 Hello.vue 文件， App.vue 文件引入 Hello.vue ，报错如下：
没有发现模块 components/Hello 或者它对应的类型申明

参考链接： https://stackoverflow.com/questions/64213461/vuejs-typescript-cannot-find-module-components-navigation-or-its-correspon

要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法定义组件。
参考文档

引用第三方库时，如果第三方类库并没有 ts 的 .d.ts 类型的声明文件，则无法在项目中正常使用。如果要顺利使用这些库， 就需要我们添加声明文件。

通过此 地址 可以查找当前安装的库有没有 .d.ts 的声明文件。

项目中引入 echarts

在 ts 声明查找地址发现 echarts 已经包含 .d.ts 类型的声明文件，则不需要我们手动去声明 echarts 模块

看了基础类型模块，想当然以为定义对象类型为下面示例：

报错如下：
提示不能使用 object 作为类型。推荐考虑使用Record<string, unknown>代替。

参考文档

参考文档

通过 as htmlElement 进行类型转换

在 setup 中定义的变量和方法，都必须通过return 暴露出去，外界才能使用，ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
在 setup 里获取 ref 绑定的 dom ，需要在 setup 的 return 有 ref(null) 的属性，模板上 ref 用对应属性名

通过 this.$refs 去获取

缺点：在 any 类型的变量上，访问任何属性都是允许的。它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。

在 src 根目录 *.d.ts 文件中进行类型申明