vue项目中使用TypeScript相关配置
一、为什么要用typescript
TypeScript简单介绍:
- 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。
- TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展,如 class / interface / module 等。这样会大大提升代码的可阅读性。
总结优势:
- 静态类型检查: 类型校验,能够避免许多低级代码错误;
- IDE 智能提示: 使用一个方法时,能清楚知道方法定义的参数和类型和返回值类型;使用一个对象时,只需要.就可以知道有哪些属性以及属性的类型;
- 代码重构: 经过不停的需求迭代,代码重构避免不了,在重构时,如果前期有清晰和规范的接口定义、类定义等,对于重构帮助很大;
- 规范性和可读性: 类似于强类型语言,有了合理的类型定义、接口定义等,对于代码实现的规范性和可读性都有很大提高,不然搜索整个项目这个方法在哪里调用、怎么定义等。个人认为最有价值点:写代码前,会先构思功能需求的整体代码架构。
二、vue+TpyeScript项目迁移
1.npm下载依赖包
复制
2.创建tsconfig.json
命令:
复制
| |
| { |
| "compilerOptions": { |
| "outDir": "./built/", |
| "sourceMap": true, |
| "strict": true, |
| "module": "es2015", |
| "moduleResolution": "node", |
| "target": "es5", |
| "skipLibCheck": true, |
| "esModuleInterop": true, |
| "experimentalDecorators": true |
| }, |
| "include": [ |
| "./src/**/*" |
| ] |
| } |
| |
| |
复制
3.webpack.base.conf.js 中的配置
| resolve: { |
| extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], |
| alias: { |
| 'vue$': 'vue/dist/vue.esm.js', |
| '@': resolve('src'), |
| } |
| }, |
| module: { |
| rules: [ |
| { |
| test: /\.ts$/, |
| exclude: /node_modules/, |
| enforce: 'pre', |
| loader: 'tslint-loader' |
| }, |
| { |
| test: /\.tsx?$/, |
| loader: 'ts-loader', |
| exclude: /node_modules/, |
| options: { |
| appendTsSuffixTo: [/\.vue$/], |
| } |
| }] |
复制
4.配置package.json
| "scripts": { |
| "build": "webpack", |
| "test": "echo \"Error: no test specified\" && exit 1" |
| }, |
复制
5.重命名main.js
- 将main.js重命名为main.ts
- 在webpack.base.conf.js中修改入口的文件名 entry: {app: ‘./src/main.ts’}
6.在main.ts同级目录下添加shims-tsx.d.ts(如果没有用tsx 语法就不用) 和 shims-vue.d.ts
| |
| |
| |
| |
| import Vue, { VNode } from 'vue' |
| declare global { |
| namespace JSX { |
| |
| interface Element extends VNode {} |
| |
| interface ElementClass extends Vue {} |
| interface IntrinsicElements { |
| [elem: string]: any |
| } |
| } |
| } |
| |
| |
| |
| import Vue from "vue"; |
| import VueRouter, { Route } from "vue-router"; |
| |
| declare module "*.vue" { |
| import Vue from "vue"; |
| export default Vue; |
| } |
| |
| declare module "vue/types/vue" { |
| interface Vue { |
| $router: VueRouter; |
| $route: Route; |
| $https: any; |
| $urls: any; |
| $Message: any; |
| $Modal: any; |
| } |
| } |
复制
7.改造 .vue文件,将vue中script切换为<script lang="ts">;
8.改造.js文件,修改为ts语法,定义类型等