vue+ts项目对app类型限制

描述

做一个ts+vue+element-plus项目的时候总是有警告

消除警告

1. 将src/plugins/element.js文件后缀名改成ts
2. 在element里面还要对脚手架现有的代码进行类型限制

在element.ts中引入

1import { App } from 'vue'

在element.ts中 对参数app和函数返回值进行类型限制

1export default (app:App<Element>):void => {
2  locale.use(lang)
3  components.forEach(component => {
4    app.use(component)
5  })
6  // app.use(ElButton).use(ElFormItem).use(ElForm).use(ElInput).use(ElLink).use(ElMain).use(ElMenu).use(ElHeader).use(ElContainer).use(ElAside)
7}

修改后的element.ts文件

1import {
2  ElButton,
3  ElForm,
4  ElFormItem,
5  ElInput,
6  ElLink,
7  ElContainer,
8  ElHeader,
9  ElAside,
10  ElMain,
11  ElMenu,
12  ElMenuItem,
13  ElMenuItemGroup,
14  ElSubmenu,
15  ElRow,
16  ElCol,
17  ElAlert
18} from 'element-plus'
19import lang from 'element-plus/lib/locale/lang/zh-cn'
20import locale from 'element-plus/lib/locale'
21import { App } from 'vue'
22
23const components = [
24  ElButton,
25  ElForm,
26  ElFormItem,
27  ElInput,
28  ElLink,
29  ElContainer,
30  ElHeader,
31  ElAside,
32  ElMain,
33  ElMenu,
34  ElMenuItem,
35  ElMenuItemGroup,
36  ElSubmenu,
37  ElRow,
38  ElCol,
39  ElAlert
40]
41
42export default (app:App<Element>):void => {
43  locale.use(lang)
44  components.forEach(component => {
45    app.use(component)
46  })
47  // app.use(ElButton).use(ElFormItem).use(ElForm).use(ElInput).use(ElLink).use(ElMain).use(ElMenu).use(ElHeader).use(ElContainer).use(ElAside)
48}