vue + typescript 项目起手式

阅读量：4083 次

发布时间：2019-05-25

本文共 6495 字，大约阅读时间需要 21 分钟。

我知道你们早就想用上 vue + ts 强类型了

安装vue-cli

安装ts依赖

配置 webpack

添加 tsconfig.json

添加 tslint.json

让 ts 识别 .vue

改造 .vue文件

什么是typescript

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

与此同时，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 进行开发。这更是充分说明了这是一门面向未来并且脚踏实地的语言。

强类型语言的优势在于静态类型检查，具体可以参见的回答。概括来说主要包括以下几点：

静态类型检查

IDE 智能提示

代码重构

可读性

静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题

前言

随着vue2.5 更好的 TypeScript 集成，同时因为新开项目的契机，故准备动手尝试一下typescript + vue

都说ts万般好，不如一个段子来的直观，一个程序员自从用上了ts之后，连续写了3000+行代码一次编译通过一气呵成，然后很激动的打电话跟老婆炫耀这件事情，老婆回了一句 哦

之前看文章或者 demo 一直认为 vue + typescript 之后就不能友好的写.vue单文件，并且我也在各种 live 中问vue + ts 或者 flow的集成，也一直没有问出什么好的实践，但是本上强上ts的念头，一个字，就是干！

终于决定自己动手，那接下来从 vue-cli 开始配置 ts，看看事实上集成 ts 的体验到底是如何呢？

先贴一张最后配置完毕的.vue文件，template 和 style 跟以前的写法保持一致，只有 script 的变化

起手vue-cli

这步应该不用写了

Vue 引入 TypeScript

首先Cli之后，接下来需要安装一些必要/以后需要的插件

安装vue的官方插件npm i vue-class-component vue-property-decorator --save// ts-loader typescript 必须安装，其他的相信你以后也会装上的npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

这些库大体的作用，可以按需引入：

：强化 Vue 组件，使用 TypeScript/装饰器增强 Vue 组件

：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器

：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件

跟：我想你也会在.ts .tsx文件约束代码格式（作用等同于eslint）

：tslint 配置 standard风格的约束

配置 webpack

首先找到./build/webpack.base.conf.js

找到entry.app 将main.js 改成 main.ts, 顺便把项目文件中的main.js也改成main.ts, 里面内容保持不变

entry: {  app: './src/main.ts'}

找到resolve.extensions 里面加上.ts 后缀（是为了之后引入.ts的时候不写后缀）

resolve: {    extensions: ['.js', '.vue', '.json', '.ts'],    alias: {      '@': resolve('src')    }  }

找到module.rules 添加webpack对.ts的解析

module: {  rules: [    {      test: /\.(js|vue)$/,      loader: 'eslint-loader',      enforce: 'pre',      include: [resolve('src'), resolve('test')],      options: {        formatter: require('eslint-friendly-formatter')      }    },// 从这里复制下面的代码就可以了    {      test: /\.ts$/,      exclude: /node_modules/,      enforce: 'pre',      loader: 'tslint-loader'    },    {      test: /\.tsx?$/,      loader: 'ts-loader',      exclude: /node_modules/,      options: {        appendTsSuffixTo: [/\.vue$/],      }    },// 复制以上的  }}

是不是加完了，那现在来解释一下

ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的作用一样）

tslint-loader 作用等同于 eslint-loader

添加 tsconfig.json

接下来在根路径下创建tsconfig.json文件

这里有一份参考的 tsconfig.json 配置，完成的配置请点击：

{  // 编译选项  "compilerOptions": {    // 输出目录    "outDir": "./output",    // 是否包含可以用于 debug 的 sourceMap    "sourceMap": true,    // 以严格模式解析    "strict": true,    // 采用的模块系统    "module": "esnext",    // 如何处理模块    "moduleResolution": "node",    // 编译输出目标 ES 版本    "target": "es5",    // 允许从没有设置默认导出的模块中默认导入    "allowSyntheticDefaultImports": true,    // 将每个文件作为单独的模块    "isolatedModules": false,    // 启用装饰器    "experimentalDecorators": true,    // 启用设计类型元数据（用于反射）    "emitDecoratorMetadata": true,    // 在表达式和声明上有隐含的any类型时报错    "noImplicitAny": false,    // 不是函数的所有返回路径都有返回值时报错。    "noImplicitReturns": true,    // 从 tslib 导入外部帮助库: 比如__extends，__rest等    "importHelpers": true,    // 编译过程中打印文件名    "listFiles": true,    // 移除注释    "removeComments": true,    "suppressImplicitAnyIndexErrors": true,    // 允许编译javascript文件    "allowJs": true,    // 解析非相对模块名的基准目录    "baseUrl": "./",    // 指定特殊模块的路径    "paths": {      "jquery": [        "node_modules/jquery/dist/jquery"      ]    },    // 编译过程中需要引入的库文件的列表    "lib": [      "dom",      "es2015",      "es2015.promise"    ]  }}

顺便贴一份自己的配置

{  "include": [    "src/**/*"  ],  "exclude": [    "node_modules"  ],  "compilerOptions": {    "allowSyntheticDefaultImports": true,    "experimentalDecorators": true,    "allowJs": true,    "module": "esnext",    "target": "es5",    "moduleResolution": "node",    "isolatedModules": true,    "lib": [      "dom",      "es5",      "es2015.promise"    ],    "sourceMap": true,    "pretty": true  }}

添加 tslint.json

在根路径下创建tslint.json文件

这里就很简单了，就是引入 ts 的 standard 规范

{  "extends": "tslint-config-standard",  "globals": {    "require": true  }}

让 ts 识别 .vue

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

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

敲黑板，下面有重点！

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。

而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：

import Component from 'components/component.vue'

改造 `.vue` 文件

在这之前先让我们了解一下所需要的插件（下面的内容需要掌握es7的, 就是下面使用的@符号）

vue-class-component

对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化：

上面的代码跟下面的代码作用是一样的

export default {  data () {    return {      msg: 123    }  }  // 声明周期钩子  mounted () {    this.greet()  }  // 计算属性  computed: {    computedMsg () {      return 'computed ' + this.msg    }  }  // 方法  methods: {    greet () {      alert('greeting: ' + this.msg)    }  }}

vue-property-decorator

是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：

@Emit

@Inject

@Model

@Prop

@Provide

@Watch

@Component (从 vue-class-component 继承)

在这里列举几个常用的@Prop/@Watch/@Component, 更多信息，详见

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'@Componentexport class MyComponent extends Vue {    @Prop()  propA: number = 1  @Prop({ default: 'default value' })  propB: string  @Prop([String, Boolean])  propC: string | boolean  @Prop({ type: null })  propD: any  @Watch('child')  onChildChanged(val: string, oldVal: string) { }}

上面的代码相当于：

export default {  props: {    checked: Boolean,    propA: Number,    propB: {      type: String,      default: 'default value'    },    propC: [String, Boolean],    propD: { type: null }  }  methods: {    onChildChanged(val, oldVal) { }  },  watch: {    'child': {      handler: 'onChildChanged',      immediate: false,      deep: false    }  }}