以@vue/cli創(chuàng)建的項(xiàng)目

1. 創(chuàng)建項(xiàng)目的時(shí)候, 選擇typescript, 會(huì)自動(dòng)添加好typescript
2. 已有的項(xiàng)目添加typescript, 使用命令vue add typescript, 相關(guān)鏈接

自行配置webpack的項(xiàng)目

1. npm下載依賴包

• 安裝 typescript, ts-loader, tslint, tslint-loader, tslint-config-standard, vue-property-decorator

2. 增加 tsconfig.json

• vue/cli 中的配置

  {
    "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"
    ]
  }

3. webpack.base.conf.js 中的配置

  resolve: {
      extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // 新增了'ts', 'tsx'
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.ts$/,  // 用于加載項(xiàng)目中的ts文件
          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/, // 用于加載項(xiàng)目中的tsx文件
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }]

4. 重命名main.js

• 將main.js重命名為main.ts
• 在webpack.base.conf.js中修改入口的文件名 entry: {app: './src/main.ts'}

5. 在main.ts同級(jí)目錄下添加shims-tsx.d.ts 和 shims-vue.d.ts

• 參考文章

  // vue/cli中的shims-tsx.d.ts
  // 作用: 為 JSX 語法的全局命名空間
  // 這是因?yàn)榛谥档脑貢?huì)簡單的在它所在的作用域里按標(biāo)識(shí)符查找
  // 此處使用的是無狀態(tài)函數(shù)組件的方法來定義, 當(dāng)在tsconfig內(nèi)開啟了jsx語法支持后, 其會(huì)自動(dòng)識(shí)別對(duì)應(yīng)的.tsx結(jié)尾的文件
  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
      }
    }
  }

  // vue/cli中的shims-vue.d.ts
  // 作用：為項(xiàng)目內(nèi)所有的 vue 文件做模塊聲明, 畢竟 ts 默認(rèn)只識(shí)別 .d.ts、.ts、.tsx 后綴的文件
  import Vue from "vue";
  import VueRouter, { Route } from "vue-router";

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

  declare module "vue/types/vue" {
    interface Vue {
      $router: VueRouter; // 這表示this下有這個(gè)東西
      $route: Route;
      $https: any;
      $urls: any;
      $Message: any;
      $Modal: any;
    }
  }

6. 接下來就可以開發(fā)了, 開發(fā)的時(shí)候依賴 vue-property-decorator

• 提供了 Vue Component, Prop, PropSync, Model, Watch, Provide, Inject, ProvideReactive, InjectReactive, Emit, Ref API