兩行命令! 搞定vue+typescript配置

建立一個空的vue項目

vue create ts_demo

複製代碼

添加 typescript插件

vue add @vue/typescript

yarn run serve // 啓動項目
複製代碼

打開文件目錄能夠看到如今的目錄結構是這樣的

能夠看到全部的js文件被編譯成了ts文件，還新增了tsconfig.json ，shims-tsx.d.ts， shims-vue.d.ts

tsconfig.json 默認配置

tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項, 更多編譯選項能夠參考 more-options

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

複製代碼

shims-tsx-d-ts

容許以 .tsx 結尾的文件，在 Vue 項目中編寫 jsx 代碼

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
    }
  }
}

複製代碼

shims-vue.d.ts

主要用於 TypeScript 識別 .vue 文件， Ts 默認並不支持導入 vue 文件，這個文件告訴 ts 導入 .vue 文件都按 VueConstructor 處理。

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

複製代碼

App.vue文件

主要變化體如今script模塊,能夠看到typescript插件自動加載了vue-property-decorator

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>
複製代碼