vue ts 设置tslint提示_TypeScript+vue使用与迁移经验总结

源宝导读：ERP平台的前端底层使用了Vue作为组件的基础架构，而使用了TypeScript语言进行组件的封装与开发。本文将简要介绍平台在使用TypeScript和Vue框架进行老功能重构时的经验总结。

一、背景

下面主要探讨是以下三个方面：

• 目前项目中使用到的vue+ts的哪些特性，还有哪些特性值得去使用，不会涉及到太多的ts语法知识；
• 老项目的迁移为ts，有哪些点需要改造；
• 各抒己见，探讨下各位都有哪些心得和见解。

二、为什么要用typescript

TypeScript简单介绍：

• 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
• TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

总结优势：

• 静态类型检查： 类型校验，能够避免许多低级代码错误；
• IDE 智能提示： 使用一个方法时，能清楚知道方法定义的参数和类型和返回值类型；使用一个对象时，只需要.就可以知道有哪些属性以及属性的类型；
• 代码重构： 经过不停的需求迭代，代码重构避免不了，在重构时，如果前期有清晰和规范的接口定义、类定义等，对于重构帮助很大；
• 规范性和可读性： 类似于强类型语言，有了合理的类型定义、接口定义等，对于代码实现的规范性和可读性都有很大提高，不然搜索整个项目这个方法在哪里调用、怎么定义等。

个人认为最有价值点：写代码前，会先构思功能需求的整体代码架构。

三、安装和起步

一般我们会面临两个情况：

• 新项目创建；
• 觉得ts不错，想将老项目切换为vue+ts。

3.1、新项目起步

• 安装vue-cli3.0；
• vue create vue-ts-hello-world；
• 选择Manually select features，勾选typescript。其他配置根据项目情况勾选。

3.2、老项目切换为vue+ts

• 安装ts依赖(或使用yarn)；
  • yarn add vue-class-component vue-property-decorator；
  • yarn add ts-loader typescript tslint tslint-loader tslint-config-standard —dev。
• 配置 webpack，添加ts-loader和tslint-loader；
• 添加 tsconfig.json；

// 这是平台目前用的tsconfig.json{  "compilerOptions": {    "target": "esnext",    "module": "esnext",    "strict": true,    "jsx": "preserve",    "importHelpers": true,    "moduleResolution": "node",    "experimentalDecorators": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "strictNullChecks": false,    "sourceMap": true,    "baseUrl": ".",    "types": [      "webpack-env",      "jest"    ],    "paths": {      "@/*": [        "src/*"      ],      // 别名追加      "components/*": [        "src/components/*"      ],    },    "lib": [ // 编译过程中需要引入的库文件的列表      "esnext",      "dom",      "dom.iterable",      "scripthost"    ]  },  "include": [    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx"  ],  "exclude": [    "node_modules",    "ui-tests"  ]}

备注： ts 也可支持 es6 / es7，在 tsconfig.json中，添加对es6 / es7的支持。

 "lib": [  "dom",  "es5",  "es6",  "es7",  "es2015.promise"]

• 添加 tslint.json 或者 prettierrc(可以视情况而定)。

// 目前平台使用的是.prettierrc.jsmodule.exports = {  "$schema": "http://json.schemastore.org/prettierrc",  "singleQuote": true,  "endOfLine": "auto",  "semi": false}

• 让 ts 识别 .vue。

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

• • 而在代码中导入 .vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 .ts 文件，不识别 *.vue 文件。
  • 添加vue-shim.d.ts，让vue文件给vue模块来编译。
• 改造 .vue文件，将vue中script切换为