Type '{}' is missing the following properties from type 'IEchartData': xAxis, value

说得是 类型{}缺少类型“IEchartData”的以下属性：xAxis，value。

我们先来看看以下例子：

<template>
    <div class="asset">
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted } from 'vue';

export interface IAssetItem {
    time: string;
    value: number | string;
}
export interface IEchartData {
    xAxis: Array<string>;
    value: Array<number | string>;
}
export interface IAsset {
    data: Array<IAssetItem>;
}
export default {
    name: 'AssetBusiness',
    setup() {
        const asset: IAsset = reactive({
            data: [
                {
                    time: '11:00',
                    value: 500,
                },
                {
                    time: '12:10',
                    value: 700,
                },
                {
                    time: '12:20',
                    value: 800,
                },
                {
                    time: '12:50',
                    value: 1300,
                },
                {
                    time: '13:00',
                    value: 1410,
                },
            ],
        });
		// 一个简单的方法重构data
        const getChartData = (data: Array<IAssetItem>) => {
        	// 判断类型等返回空对象
            if (!Array.isArray(data) || data.length < 1) return {};
            const res: IEchartData = {
                xAxis: [],
                value: [],
            };
            data.forEach((item) => {
                res.xAxis = [...res.xAxis, item.time];
                res.value = [...res.value, item.value];
            });
            return res;
        };

        onMounted(() => {
            const copyData = JSON.parse(JSON.stringify(asset.data || {}));
            // 得到想要的值，这个值有两个不同的类型
            const data = getChartData(copyData);
            // 打印的时候会报红，说Property 'xAxis' does not exist on type '{}'
            // 是因为data返回的值有IEchartData 和 {}两种类型，所以会报红
            console.log(data.xAxis);
        });
        return {
            ...toRefs(asset),
        };
    },
};
</script>

<style lang="scss" scoped>
.asset {
    width: 420px;
    height: 274px;
    margin: 10px 14px 0 16px;
    padding: 24px;

    &_echart {
        width: 100%;
        height: 230px;
    }
}
</style>

如上，就会报红: Property 'xAxis' does not exist on type '{}'，那么我们如何处理呢？
我们看下一步，我们尝试给data一个类型IEchartData，但是依然会报红：Type '{}' is missing the following properties from type 'IEchartData': xAxis, value，是因为在上面返回的值不仅仅只有IEchartData类型，所以我们还要赋值其他的类型。如下就可以正常解决。

onMounted(() => {
    const copyData = JSON.parse(JSON.stringify(asset.data || {}));
    // 我们尝试给data一个类型IEchartData以及{}，就解决啦
    const data: IEchartData | {} = getChartData(copyData);
});

但是此时使用data.xAxis依然会出现一开始的报红，那么我们给一个类型断言就可以了。

onMounted(() => {
    const copyData = JSON.parse(JSON.stringify(asset.data || {}));
    const data: IEchartData | {} = getChartData(copyData);
    // 使用类型断言
    const chartData = data as IEchartData;
    // 这样就可以正常使用啦
    console.log(chartData .xAxis);
});