本文記錄一些vue3+ts+less開發(fā)過(guò)程中的一些小問(wèn)題熙掺。
不斷開發(fā)、不斷更新...

1. 引用.vue文件報(bào)錯(cuò)（vue3必須使用.vue后綴跛璧？暫時(shí)沒(méi)找到解決方案）

問(wèn)題

新建Hello.vue文件，App.vue文件引入Hello.vue，報(bào)錯(cuò)如下：
沒(méi)有發(fā)現(xiàn)模塊components/Hello或者它對(duì)應(yīng)的類型申明

image.png

解決方案（vue2的解決方案）

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

2. .vue文件export導(dǎo)出

要讓 TypeScript正確推斷 Vue 組件選項(xiàng)中的類型趋厉，需要使用 defineComponent 全局方法定義組件。
參考文檔

import {defineComponent} from 'vue';
export default defineComponent({
// 開啟類型推斷
});

3. 引入第三方庫(kù)

引用第三方庫(kù)時(shí)胶坠，如果第三方類庫(kù)并沒(méi)有ts的.d.ts類型的聲明文件君账，則無(wú)法在項(xiàng)目中正常使用。如果要順利使用這些庫(kù)沈善， 就需要我們添加聲明文件乡数。

通過(guò)此地址可以查找當(dāng)前安裝的庫(kù)有沒(méi)有.d.ts的聲明文件。

項(xiàng)目中引入echarts

npm install echarts --save
import * as echarts from 'echarts';
echarts.init(dom); // 正常使用

在ts聲明查找地址發(fā)現(xiàn)echarts已經(jīng)包含.d.ts類型的聲明文件矮瘟，則不需要我們手動(dòng)去聲明echarts模塊

image.png

4. 定義對(duì)象類型變量

看了基礎(chǔ)類型模塊瞳脓，想當(dāng)然以為定義對(duì)象類型為下面示例：

let option: object = {
     title: {
         text: 'ECharts 入門示例'
     },
     legend: {
        data: ['銷量']
     },
     xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
     },
     yAxis: {},
     series: [{
         name: '銷量',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20]
     }]
};

報(bào)錯(cuò)如下：
提示不能使用object作為類型。推薦考慮使用Record<string, unknown>代替澈侠。

image.png

解決方案

1. 使用Record<string, any>（檢查不夠嚴(yán)格）

參考文檔

let option: Record<string, any> = {
    ....
}

2. 使用interface接口定義類型（每一個(gè)屬性檢查嚴(yán)格）

參考文檔

// 定義echarts options接口interface
interface echartsOptions {
    // 非必須屬性劫侧，key為string，value為any類型
    title?: Record<string, any>;
    legend?: Record<string, any>;
    // 非必須屬性哨啃，值為string類型組成的數(shù)組
    color?: string[];
    xAxis: Record<string, any>;
    yAxis: Record<string, any>;
    series: Record<string, any>;
    // 接收指定屬性之外的額外屬性烧栋，不會(huì)報(bào)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）通過(guò)document獲取dom元素

通過(guò)as HTMLElement進(jìn)行類型轉(zhuǎn)換

let myChart = echarts.init(document.getElementById('main') as HTMLElement);

（2）setup中通過(guò)ref獲取dom元素

在setup中定義的變量和方法，都必須通過(guò)return {}暴露出去拳球，外界才能使用审姓，ref函數(shù)僅能監(jiān)聽基本類型的變化，不能監(jiān)聽復(fù)雜類型的變化（比如對(duì)象祝峻、數(shù)組）
在setup里獲取ref綁定的dom魔吐，需要在setup的return有ref(null)的屬性，模板上ref用對(duì)應(yīng)屬性名

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中通過(guò)$refs獲取dom元素

通過(guò)this.$refs去獲取

mounted() {
    let myChart = echarts.init(this.$refs.echarts2 as HTMLElement);
}

6. 獲取掛載在window對(duì)象上的屬性a報(bào)錯(cuò)

image.png

解決方案

（1）使用類型斷言

缺點(diǎn)：在 any 類型的變量上莱找，訪問(wèn)任何屬性都是允許的酬姆。它極有可能掩蓋了真正的類型錯(cuò)誤，所以如果不是非常確定奥溺，就不要使用 as any辞色。

(window as any).a = 1;

（2）類型申明

在src根目錄*.d.ts文件中進(jìn)行類型申明

interface Window {
    a: any;
}