Vue + TypeScript 重構 vue-admin-element 小結

簡單看了下 typescript 官網的語法，就想借助一個項目實戰下。這裏選用了 vue-admin-element

附上源碼地址：vue-element-admin-ts,歡迎 star 或 fork

遇到的問題及解決方案

• Q: error TS7017: Index signature of object type implicitly has an 'any' type

  A: https://stackoverflow.com/que...

  或者在 tsconfig.json文件的 compilerOptions選項中添加

  "noImplicitAny": false

• Q: error TS2339: Property 'webkitURL' does not exist on type 'Window'

  A:https://stackoverflow.com/que...

  interface Window {    
      webkitURL?: any; 
  } 
  declare var window: Window;

• Q: Property 'context' does not exist on type 'NodeRequire'.

  A:https://github.com/rails/webp...

  npm i -D @types/webpack-env

• Q: 'this' implicitly has type 'any' because it does not have a type annotation

  A: https://stackoverflow.com/que...

• Q: 導入 .vue 時，爲什麼會報錯，即使所寫的路徑並沒有問題？

  A: 在 TypeScript 中，它僅識別 js/ts/jsx/tsx 文件，爲了讓它識別 .vue 文件，我們需要顯式告訴 TypeScript，vue 文件存在，並且指定導出 VueConstructor：

  declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
  }

• Q: TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.

  A: 空的數組添加數據的時候，會有這個提示，解決方案：https://github.com/Microsoft/...

• Q: Property 'basePath' has no initializer and is not definitely assigned in the constructor.

      59 |   @Prop({required: true, default: {}}) public item: Route;
      60 |   @Prop({default: false}) public isNest: boolean;
    > 61 |   @Prop({default: ''}) public basePath: string;

• A: https://github.com/kaorun343/...
• Q: Object is possibly 'undefined'.

  A: https://stackoverflow.com/que...

• Q:Property '$refs' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property '$refs' does not exist on type 'Element'.

  A: https://github.com/vuejs/vue-...

  https://juejin.im/post/5bd698...

  https://www.leevii.com/2018/1...