vue + ts中的shims-vue.d.ts文件的作用,在ts中引入vue-echarts等vue文件 TypeScript 导入 JSON Module --resolveJsonModule

 

shims-vue.d.ts是为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的,
加这一段是是告诉 ts,vue 文件是这种类型的。
这一段删除,会发现 import 的所有 vue 类型的文件都会报错。

/**
* shims-vue.d.ts的作用
* 为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的,
* 加这一段是是告诉 ts,vue 文件是这种类型的。
* 可以把这一段删除,会发现 import 的所有 vue 类型的文件都会报错。
*/

declare module '*.vue' { //declare声明宣告, 声明一个ambient module(即:没有内部实现的 module声明)
import Vue from 'vue'
export default Vue
}
复制代码
// typings.d.ts

declare module '*.json' {
    const value: any;
    export default value;
}



import json from 'src/assets/json/users.json'
复制代码

 

declare module 'vue-echarts' // 引入vue-echarts

<script lang="ts">
/* eslint-disable @typescript-eslint/camelcase */
import { Vue, Component, Watch } from 'vue-property-decorator'
import ECharts from 'vue-echarts' //报错,按上面的方法在shims-vue.d.ts文件中引入即可
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
</script>
————————————————
版权声明:本文为CSDN博主「小小前端--可笑可笑」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41860203/article/details/110912759

posted @   威武的大萝卜  阅读(3549)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示