本文记录一些vue3+ts+less开发过程中的一些小问题。
不断开发、不断更新...
1. 引用.vue文件报错(vue3必须使用.vue后缀?暂时没找到解决方案)
问题
新建Hello.vue
文件,App.vue
文件引入Hello.vue
,报错如下:
没有发现模块components/Hello
或者它对应的类型申明
解决方案(vue2的解决方案)
2. .vue文件export导出
要让 TypeScript
正确推断 Vue
组件选项中的类型,需要使用 defineComponent
全局方法定义组件。
参考文档
import {defineComponent} from 'vue';
export default defineComponent({
// 开启类型推断
});
3. 引入第三方库
引用第三方库时,如果第三方类库并没有ts
的.d.ts
类型的声明文件,则无法在项目中正常使用。如果要顺利使用这些库, 就需要我们添加声明文件。
通过此地址可以查找当前安装的库有没有.d.ts
的声明文件。
项目中引入echarts
npm install echarts --save
import * as echarts from 'echarts';
echarts.init(dom); // 正常使用
在ts
声明查找地址发现echarts
已经包含.d.ts
类型的声明文件,则不需要我们手动去声明echarts
模块
4. 定义对象类型变量
看了基础类型模块,想当然以为定义对象类型为下面示例:
let option: object = {
title: {
text: 'ECharts 入门示例'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
报错如下:
提示不能使用object
作为类型。推荐考虑使用Record<string, unknown>代替。
解决方案
1. 使用Record<string, any>
(检查不够严格)
let option: Record<string, any> = {
....
}
2. 使用interface
接口定义类型(每一个属性检查严格)
// 定义echarts options接口interface
interface echartsOptions {
// 非必须属性,key为string,value为any类型
title?: Record<string, any>;
legend?: Record<string, any>;
// 非必须属性,值为string类型组成的数组
color?: string[];
xAxis: Record<string, any>;
yAxis: Record<string, any>;
series: Record<string, any>;
// 接收指定属性之外的额外属性,不会报bug
[propName: string]: any
}
let option: echartsOptions = {
....
}
5. ref或document获取dom元素
<template>
<div id="main" ref="echarts1" style="width: 600px;height:400px;"></div>
<div id="main2" ref="echarts2" style="width: 600px;height:400px;"></div>
</template>
解决方案
(1)通过document获取dom元素
通过as HTMLElement
进行类型转换
let myChart = echarts.init(document.getElementById('main') as HTMLElement);
(2)setup
中通过ref获取dom元素
在setup
中定义的变量和方法,都必须通过return {}暴露出去,外界才能使用,ref函数仅能监听基本类型的变化,不能监听复杂类型的变化(比如对象、数组)
在setup
里获取ref
绑定的dom
,需要在setup
的return
有ref(null)
的属性,模板上ref
用对应属性名
import {ref} from 'vue';
setup() {
// <>类型声明
const echarts1 = ref<HTMLElement|null>(null);
const echarts2 = ref<HTMLElement|null>(null);
let myChart = echarts.init(echarts1.value as HTMLElement);
return {
echarts1,
echarts2
};
}
(3)mounted中通过$refs获取dom元素
通过this.$refs
去获取
mounted() {
let myChart = echarts.init(this.$refs.echarts2 as HTMLElement);
}
6. 获取挂载在window对象上的属性a报错
解决方案
(1)使用类型断言
缺点:在 any 类型的变量上,访问任何属性都是允许的。它极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any。
(window as any).a = 1;
(2)类型申明
在src
根目录*.d.ts
文件中进行类型申明
interface Window {
a: any;
}