Vue3+TS中的shims-vue.d.ts文件的作用及代码说明
日期:2021-04-11
来源:程序思维浏览:17600次
在Vue3中安装TypeScript后,会出现一个shims-vue.d.ts文件,那么它是干什么的,起着什么作用呢?
shims-vue.d.ts是为了typescript做的适配定义文件,因为.vue文件不是一个常规的文件类型,TypeScript是不能理解vue文件是干嘛的,加这一段是是告诉 TypeScript,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
}
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>
shims-vue.d.ts是为了typescript做的适配定义文件,因为.vue文件不是一个常规的文件类型,TypeScript是不能理解vue文件是干嘛的,加这一段是是告诉 TypeScript,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
}
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>
精品好课