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

创建一个空的vue项目

vue create ts_demo

添加 typescript插件

vue add @vue/typescript

yarn run serve // 启动项目

打开文件目录可以看到现在的目录结构是这样的

image

可以看到所有的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<Vue> 处理。

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>