如何處理vue-cli3+ts+element-ui 呼叫$message/$alert時的編譯報錯

小p發表於2019-02-21
VueUI編譯

使用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
複製程式碼

相關文章