A, the conclusion

First of all, the industry almost has a negative attitude towards the use of TS for Vue2. From the author’s current practice, IT is really inconvenient to use TS for Vue2. But the author thinks, just the use level is not convenient, for reducing the error rate in the development process, is still worth introducing. And if you use vue.extend directly, upgrading to Vue3 doesn’t change much so far. (1) “The initial design of Vue2 did not consider the type system at all”. It needs to be written in the vuE-class-component way, which I personally feel very troublesome. (2) Vue3 is written differently (define ecomponent, although vuE-CLI-generated templates are still vuE-class-component at present), so if the project plans to upgrade to Vue3 in the future, Then you have to rewrite the writing mode (use vue.extend directly, which is much cheaper to rewrite after upgrading). (3) The cost of training and whether the team members can learn quickly. (4) TS, JS mixed development, separation of old and new code, progressive is modified.

Ii. Ts is introduced into the project

Download typescript and TS-Loader

npm i typescript ts-loader -D
Copy the code

Download vue-class-Component and write a VUE in class mode (optional)

npm i vue-class-component --save
Copy the code

3, configure webpack, VUE-CLI provides the entrance to modify webpack

Module. exports = {configureWebpack: {resolve: {extensions: ['.js', '.vue ', '.json ', '.ts'], module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] // ts-loader } }, ] } } };Copy the code

4. Add tsconfig.json to the root directory

{"compilerOptions": {// conform to Vue browser support "target": "es5", // this allows stricter inference "strict" on data property on 'this' : True, // If using webpack 2+ or rollup, use tree-shake: "module": "es2015", "moduleResolution": "node"}}Copy the code

Eslint can support js and TS code specifications at the same time, which is ideal for projects that use JS and TS together.

1. Initialize ESLint. You can re-initialize even if you already have ESLint

eslint --init
Copy the code

2. Download eslint-loader

npm i eslint-loader -D
Copy the code

Eslint is configured for Webpack

{test: / \. (js | vue | ts) $/, loader: ` eslint - loader `, enforce: ` pre `, options: {fix: true, / / repair the -quiet automatically: true, emitWarning: true, }, }Copy the code