【typescript】Vue CLI4建立vue項目

在vue項目中使用ts，有兩種方式：

1.全新項目：使用vue cli4腳手架建立vue項目時，選中typescript，會自動配置好ts相關環境。開箱即用。
2.已有項目：使用vue cli4添加vue官方配置的ts相關插件。
vue add typescript

當前操做環境

$ node --version
v12.22.1
$ npm --version
6.14.12
$ yarn --version
1.22.5
$ vue --version
@vue/cli 4.5.13

vue cli4自動完成了那些ts配置

這裏咱們主要看一下vue cli4腳手架自動配置了那些ts配置

1.安裝依賴

dependencies 依賴

"vue-class-component": "^7.2.3",//提供使用Class 語法寫Vue組件
"vue-property-decorator": "^9.1.2"//在Class語法基礎上提供一些輔助裝飾器。加強的class 描述組件的工具

devDependencies 依賴

"@typescript-eslint/eslint-plugin": "^4.18.0",//使用ESlint 校驗 Typescript 代碼。其實ts有本身的校驗工具，tslint，可是很差用，因此大可能是使用eslint+該工具來校驗
"@typescript-eslint/parser": "^4.18.0",//將ts轉爲 AST 供Eslint 校驗使用。是@typescript-eslint/eslint-plugin中內部使用的插件
"@vue/cli-plugin-typescript": "~4.5.0",//是vue-cli的一個插件，將ts相關的工具集成起來，將ts+ts-loader+fork-ts-checker-webpack-plugin 集成，進行更快的類型檢查，是一個統一的集成調度者。
"@vue/eslint-config-typescript": "^7.0.0",//爲eslint 提供關於ts的校驗規則
"typescript": "~4.1.5"//typescript編譯器，提供類型校驗和轉換js功能

2. 生成ts配置文件tsconfig.json

默認已經配置了許多能夠開箱即用的功能

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. src下新增兩個文件

shims-vue.d.ts

ts是沒辦法識別 以.vue 結尾的模塊的（eg：import xx from xx.vue， 該語句ts識別不了），經過該文件作適配處理，使項目中加載.vue 模塊的文件時不報錯。通常不修改。該文件意思是：聲明全部以 .vue結尾的文件模塊，其類型都是vue構造函數。

# shims-vue.d.ts

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

shims-tsx.d.ts

若是要在項目中使用tsx 或者jsx 描寫組件模塊的話，補充了一些類型聲明。若是沒有這些類型聲明，在jsx中使用這些成員的時候，會找不到。若是項目中沒有使用jsx，能夠將該文件忽略掉

# shims-tsx.d.ts

import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

4. 都是用.ts 後綴 代替原來的.js 後綴