vue項(xiàng)目引入ts步驟(小結(jié))

更新時(shí)間：2019年10月31日 11:30:57 作者：鄒R-ainna

這篇文章主要介紹了vue項(xiàng)目引入ts步驟(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近考慮到老項(xiàng)目代碼的可維護(hù)性以及穩(wěn)定性，決定引入ts做規(guī)范檢測(cè)。因?yàn)榻榻B的東西比較基礎(chǔ)，如果介紹的不對(duì)，麻煩指正。

1. 簡(jiǎn)介

TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類型系統(tǒng)和對(duì) ES6 的支持。網(wǎng)上關(guān)于ts的學(xué)習(xí)資料很多，這里不做詳細(xì)介紹。可參考的學(xué)習(xí)網(wǎng)站：

ts.xcatliu.com/

typescript.bootcss.com/

2. 安裝依賴包

cnpm i typescript ts-loader --save-dev

3. 添加tsconfig.json文件

在項(xiàng)目根目錄下添加 tsconfig.json 文件。tsconfig.json 文件用來指定ts的編譯選項(xiàng)。配置可參考：

https://typescript.bootcss.com/tsconfig-json.html

項(xiàng)目工程 tsconfig.json 文件配置如下：（僅做參考）

{
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitOnError": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "allowJs": true,
    "noEmit": false,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*", "types"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

4. webpack打包配置修改

webpack.config.js 打包文件修改，新增對(duì).ts文件的打包配置。

4.1 入口文件后綴名由.js修改為.ts

module.exports = {
  entry: {
    app: ['@babel/polyfill', './src/main.ts']
  }
}

4.2 extensions 文件擴(kuò)展名增加 .ts, .tsx 文件的支持

tsx針對(duì)react項(xiàng)目文件的支持，因?yàn)槲覀兊墓こ袒趘ue開發(fā)，支持.ts文件就可以了。

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json', '.css', '.ts']
  }
}

4.3 loader增加對(duì)ts文件的支持

使用ts-loader來轉(zhuǎn)換ts文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
         appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  }
}

5. eslint 添加對(duì)ts文件的檢測(cè)

5.1 安裝依賴包

cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev

@typescript-eslint/parser ts文件解析器

@typescript-eslint/eslint-plugin 版本號(hào)需要與@typescript-eslint/parser的版本一致，解析器相關(guān)的配置選項(xiàng)

eslint-config-typescript 針對(duì)ts項(xiàng)目配置的eslint檢測(cè)規(guī)范

5.2 .eslintrc配置文件修改

.eslintrc配置文件修改，支持對(duì)ts的文件的校驗(yàn)。經(jīng)過多次調(diào)整，我們工程的 .eslintrc 配置文件如下：

{
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "project": "./tsconfig.json",
    "extraFileExtensions": [".vue"],
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "env": {
   "jest": true,
   "browser": true
  },
  "settings": {
   "import/resolver": {
    "node": {
     "extensions": [".js", ".jsx", ".ts", ".tsx", ".eslintrc"]
    },
    "webpack": {
     "config": {
      "resolve": {
       "alias": {
        "src": "src"
       }
      }
     }
    }
   }
  },
  "plugins": [
    "vue",
    "babel",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:vue/base",
    "typescript",
    "standard"
  ],
  "rules": {
    "func-names": 0,
    "one-var": [1, "never"],
    "prefer-const": 1,
    "no-unused-expressions": 1,
    "new-cap": 2,
    "prefer-arrow-callback": 2,
    "arrow-body-style": 0,
    "max-len": [
      1,
      {
      "code": 200,
      "ignoreStrings": true,
      "ignoreUrls": true,
      "ignoreRegExpLiterals": true
      }
    ],
    "consistent-return": "off",
    "default-case": 2,
    "prefer-rest-params": 2,
    "no-script-url": 0,
    "no-console": [
      2,
      {
      "allow": ["info", "error", "warn", "log"]
      }
    ],
    "no-duplicate-imports": 2,
    "newline-per-chained-call": 2,
    "no-underscore-dangle": 2,
    "eol-last": 2,
    "no-useless-rename": 2,
    "class-methods-use-this": 0,
    "prefer-destructuring": 0,
    "no-unused-vars": 0,
    "@typescript-eslint/no-unused-vars": 1,
    "no-plusplus": 0,
    "import/prefer-default-export": 0,
    "import/no-dynamic-require": 2,
    "@typescript-eslint/no-var-requires": 2,
    "no-use-before-define": [
      "error",
      {
      "functions": false
      }
    ],
    "@typescript-eslint/no-use-before-define": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "no-invalid-this": 0,
    "babel/no-invalid-this": 2,
    "no-await-in-loop": "off",
    "array-callback-return": "off",
    "no-restricted-syntax": "off",
    "@typescript-eslint/no-explicit-any": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-unresolved": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/no-object-literal-type-assertion": 0,
    "no-param-reassign": [
      2,
      {
      "props": false
      }
    ],
    "generator-star-spacing": "off",
    "indent": [2, 4, {
      "SwitchCase": 1
    }],
    "eqeqeq": 0,
    "no-else-return": 2,
    "arrow-parens": 0,
    "space-before-function-paren": ["error", "never"],
    "comma-dangle": [2, "never"],
    "semi": [2, "always"]
  }
 }

注意"extends": ["plugin:vue/base"], 只能選擇vue/base，不能用vue/recommend。不然會(huì)有規(guī)則沖突。

6. 項(xiàng)目文件轉(zhuǎn)換

項(xiàng)目配置好后，開始對(duì)老代碼進(jìn)行改造，來支持ts的語法檢測(cè)。

6.1 增加ts聲明文件目錄

項(xiàng)目中總會(huì)依賴一些資源包，或是自己開發(fā)的一些組件，這些文件需要補(bǔ)充聲明文件，聲明文件就是將多個(gè)聲明語句放在一起，這些聲明文件可統(tǒng)一放到一個(gè)目錄里。這個(gè)目錄需要包含在 tsconfig.json 文件的include里。

ms工程在根目錄下新建 types 目錄，目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.d.ts 等文件。

6.2 全局vue.d.ts聲明文件

需要在ts環(huán)境下識(shí)別vue文件，需要添加 vue.d.ts 全局聲明文件，例子如下：

import VueRouter, { Route } from 'vue-router';
import RequestAxios from './request';

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $request: RequestAxios;
    ....
  }
}

6.2 vue文件的改造

vue文件的改造，只改造js部分，代碼大致修改如下：

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({
  components: {
    ....
  }
})
export default class MyComponent extends Vue {
  // prop
  @Prop({ default: () => {} }) readonly pageInfo !: any

  // data
  private showAnimation : boolean = true;

  // watch
  @Watch('showModuleIndex')
  onShowModuleIndexChanged(newValue: any) {
    this.$emit('input', newValue);
  }

  // computed
  get list() {
    const { page, cityList } = this;
    return page.cityList.split(',').map(
      cityId => cityList.find(c => String(c.id) === cityId)
    );
  }

  // mounted
  private mounted() :void {
    this.initEditor();
  }

  // methods
  private initEditor() :void {
    ....
  }
}
</script>

6.3 js文件的改造

將文件后綴名更改為.ts，然后加上類型就可以了。

7. 踩坑總結(jié)

大部分都是eslint校驗(yàn)時(shí)的報(bào)錯(cuò)，按照提示修復(fù)就可以了。

"vue/html-indent": [2, 4] eslint這條規(guī)則去掉

"plugin:vue/base"與"plugin:vue/recommend"的區(qū)別

...

8. 總結(jié)

項(xiàng)目改造過程中，大部分時(shí)間都是在查配置兼容問題，配置這塊解決了，改造起來速度還是挺快的。雖然前期會(huì)有一些改造成本，但是長(zhǎng)遠(yuǎn)來看，還是有意義的。畢竟很多代碼類型上的問題在開發(fā)階段就可以暴露，不用等到運(yùn)行時(shí)才發(fā)現(xiàn)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: