使用vue-cli3新建的ts项目,按照element-ui的文档载入了element-ui,能够正常使用
但是,今天在调用$message方法时,出现了以下错误
ERROR in E:/seat-admin/src/views/seatManagement/seatManagement.vue
241:12 Property '$message' does not exist on type 'SeatManagement'.
239 | private removeArea (key: string): void {
240 | if (this.areaArray.length === 1) {
> 241 | this.$message('至少保留一个');
| ^
242 | return
243 | }
244 | this.areaArray = this.areaArray.filter(area => {
错误提示说,组件实例下面没有$message这个属性,查了很多资料,发现应该是ts的声明出了问题,但是Ctrl+左键点击$message确实可以跳转到element-ui已经设置好的声明文件中
node_modules\element-ui\types\message.d.ts
export interface ElMessage {
/** Show an info message */
(text: string): ElMessageComponent
/** Show message */
(options: ElMessageOptions): ElMessageComponent
/** Show a success message */
success (text: string): ElMessageComponent
/** Show a warning message */
warning (text: string): ElMessageComponent
/** Show an info message */
info (text: string): ElMessageComponent
/** Show an error message */
error (text: string): ElMessageComponent
}
declare module 'vue/types/vue' {
interface Vue {
/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
$message: ElMessage
}
}
上面的代码可以看到,element-ui本身已经将$message方法声明好了,所以怀疑是这些代码没有加载到项目中去
我查看了typescript的文档,发现对于编译配置部分有相关的说明
ts文档,看@types,typeRoots和types部分
文档上说,编译时默认拉取node_modules/@types下面的文件,额外还有typeRoots和types两个属性可以自定义配置
看下我们项目中的tsconfig文件:
{
"compilerOptions": {
"types": [
"webpack-env",
"mocha",
"chai"
]
}
}
可以看到,设置了types属性,表示只使用以下三个位置的配置
node_modules/@types/webpack-env
node_modules/@types/mocha
node_modules/@types/chai
但是element-ui的types位置在node_modules/elememt-ui/types下面,所以试着将这个位置加入了配置中
{
"compilerOptions": {
"types": [
"webpack-env",
"mocha",
"chai",
"./../element-ui/types"
]
}
}
好了,编译成功!!
No type errors found
Version: typescript 3.2.4
Time: 3196ms