vue + typescript 项目起手式

104

vue + typescript 新项目起手式

最后更新于2018-06-30,技术文具有时效性,请知悉

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

还有后续 vue + typescript 进阶篇

  • 安装vue-cli
  • 安装ts依赖
  • 配置 webpack
  • 添加 tsconfig.json
  • 添加 tslint.json
  • ts 识别 .vue
  • 改造 .vue文件

什么是typescript

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

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

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

强类型语言的优势在于静态类型检查,具体可以参见 http://www.zhihu.com/question... 的回答。概括来说主要包括以下几点:

  1. 静态类型检查
  2. IDE 智能提示
  3. 代码重构
  4. 可读性
静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题

前言

随着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-class-component:强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件
  • vue-property-decorator:在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
  • ts-loader:TypeScript 为 Webpack 提供了 ts-loader,其实就是为了让webpack识别 .ts .tsx文件
  • tslint-loadertslint:我想你也会在.ts .tsx文件 约束代码格式(作用等同于eslint)
  • tslint-config-standardtslint 配置 standard风格的约束

配置 webpack

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

  • 找到entry.appmain.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 配置,完成的配置请点击 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文件

这里就很简单了,就是 引入 tsstandard 规范

{
  "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-class-componentVue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化:

<template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 声明周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

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

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-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'

@Component
export 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
    }
  }
}

开始修改App.vue文件

  1. script 标签上加上 lang="ts", 意思是让webpack将这段代码识别为typescript 而非javascript
  2. 修改vue组件的构造方式( 跟react组件写法有点类似, 详见官方 ), 如下图
  3. vue-property-decorator语法改造之前代码

clipboard.png

当然也可以直接复制下面的代码替换就可以了

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

接下来用相同的方式修改HelloWorld.vue即可

npm run dev

这个时候运行项目就应该能正常跑起来了

到这里我们的配置就已经结束了

最后

如果按照文章没有配置出来,可以参考此repo vue-typescript-starter (安全按照文章一步一步操作的版本)

总的来说,就如本文最初讲,ts 从数据类型、结构入手,通过静态类型检测来增强你代码的健壮性,从而避免 bug 的产生。

同时可以继续使用.vue单文件

而且我个人认为加上了typescript,项目逼格提升2个level,也能让后端大哥们不吐槽js弱语言的诟病了

相信之后 vue 对于 ts 的集成会更加友善,期待尤大之后的动作

还有后续 vue + typescript 进阶篇

参考链接/推荐阅读

你可能感兴趣的

67 条评论
flyinhighwj · 2017年12月25日

Vue warn]: Property or method "computedMsg" is not defined on the instance but referenced during render. 会报这个警告

回复

0

computedMsg,这个是methods?给点上下文

三命 作者 · 2017年12月25日
0

我知道了,我在页面中用的是ComputedMsg, C大写了

flyinhighwj · 2017年12月25日
0

哈哈哈哈哈,这种小问题

三命 作者 · 2017年12月26日
carlEarlZhou · 1月3日

如果不用property-decorator只用class-component的话,props应该怎么写呢,按照官方的写法,类里面用this.prop这种形式会报错找不到。
Property 'XXX' does not exist on type 'XXX'.

回复

0

应该是@Component({})里面正常写props就可以了

三命 作者 · 1月3日
0

@王啊瑞
import Vue from "vue"
// import {Component, Prop} from 'vue-property-decorator'
import Component from 'vue-class-component'

@Component({

props: {
    initialEnthusiasm: Number
}

})
export default class HelloDecorator extends Vue {

enthusiasm = this.initialEnthusiasm
increment() {
    this.enthusiasm++;
}
decrement() {
    if (this.enthusiasm > 1) {
        this.enthusiasm--;
    }
}
get exclamationMarks(): string {
    return Array(this.enthusiasm + 1).join('!');
}

}
这样就会报那个错误,这和emitDecoratorMetadata有关系吗

carlEarlZhou · 1月3日
0

看了下源码,确实用反射来做的,不然的话在运行时会出现参数未声明的问题,还是用vue-property-decorator来一步到位吧

三命 作者 · 1月3日
周瑜 · 1月12日

怎么觉得最终完成的vue组件写法和angular-cli生成的组件这么神似啊
vue是angular的亲儿子?

回复

G姓码农 · 1月12日

请问没有使用修饰器,data 用了as

data () {
      return {
        activeName: 'layout' as string,
        searchValue: '' as string,
        bComponents: [] as ComponentItem[],
        searchComponents: [] as ComponentItem[]
      }
    },

eslint检测报警告,用tslint后vue文件还有必要用eslint吗,或者有没有办法解决这个警告

回复

0

我正式写项目的时候权衡了一下,关了tslint,只用eslint,ts文件没问题,tsx文件几乎没啥支持

三命 作者 · 1月12日
G姓码农 · 1月17日

突然发现ie不兼容,加了polyfill也不行

回复

0

是"target": "es5"吗,我环境mac,无法测试ie

三命 作者 · 1月17日
north · 3月6日

ts-loader 4.0.1版本会报错

回复

0

这个版本我还真没跑过,去试试

三命 作者 · 3月9日
0

是ts-loader和webpack的版本问题吧,3.5.0的ts-loader应该没问题。

在路上_w · 3月13日
0

已经升级到webpack4

三命 作者 · 4月12日
逆光飞翔 · 3月9日

大神们 为什么配置完后 npm run dev 后回报这个错
Module build failed: TypeError: Cannot read property 'afterCompile' of undefined

at successfulTypeScriptInstance (C:\Users\zxd\Desktop\新建文件夹 (2)\my-project\node_modules\_ts-loader@4.0.1@ts-loader\dist\instances.js:147:27)
at Object.getTypeScriptInstance (C:\Users\zxd\Desktop\新建文件夹 (2)\my-project\node_modules\_ts-loader@4.0.1@ts-loader\dist\instances.js:48:12)
at Object.loader (C:\Users\zxd\Desktop\新建文件夹 (2)\my-project\node_modules\_ts-loader@4.0.1@ts-loader\dist\index.js:16:41)

回复

0

信息太少了,看不出来

三命 作者 · 3月9日
1

ts-loader是4的版本吧。换成3.5.0试试

在路上_w · 3月13日
0

我的也是这个错误

一其航 · 3月27日
一其航 · 3月28日

[ts] 找不到模块“vue”。这个怎么办啊

回复

0

只要引用了lodash

一其航 · 3月28日
0

报错什么,代码怎么写的

三命 作者 · 3月28日
0

d.ts 里面声明了lodash吗

三命 作者 · 3月28日
djjkdnj · 4月12日

不支持webpack配置的alias吗?,vue文件script标签中import的包含alias的文件,都会有波浪线提示(cannot find moudle ...)
但是能通过编译,程序也能跑起来

回复

0

正好在改这个配置

在tsconfig.json 里面加上


  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@": ["*"],
      "*": ["*", "src/*"],
      "components/*": ["src/components/*"],
      "utils/*": ["src/utils/*"],
    }
}

更多内容可以看文档

三命 作者 · 4月12日
0

@三命 谢谢。刚刚试了下,在tsconfig.json中配置baseUrl和paths只能在ts文件中修复我上述提到的错误,但vue文件中依然提示cannot find moudle ...,是vetur的锅么

djjkdnj · 4月12日
0

请问Cannot read property 'vue' of undefined这个问题解决了吗

fang · 7月15日
zhantewei2 · 4月25日

既然用上typescript,撸一套angular的语法,岂不是更好。没必要用.vue文件了。

import './xx.component.scss'
@Component({
template:require('./xx.component.html')
})
export default class extends Vue{

}
这样不是更好么

回复

2

抱歉,不接受写3个文件

三命 作者 · 4月25日
明道_Jerry · 5月7日

vue-class-component:强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件
vue-property-decorator:在 vue-class-component 上增强更多的结合 Vue 特性的装饰器

语法上 侵入性真大。。果断说no,等官方对vuex的支持吧

回复

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
tsconfig.json文件里加了"experimentalDecorators": true 但是还报这个错

回复

0

改了后重启了么

三命 作者 · 6月7日
柴米油盐 · 6月30日

修改完成后,一直报 vue undefined in src/main.ts,请问这个怎么解决呢

回复

0

修改了什么东西?

三命 作者 · 6月30日
0

请问解决了吗,Cannot read property 'vue' of undefined这个问题

fang · 7月15日
0

Cannot read property 'vue' of undefined求解

飞天小骚猪 · 7 小时前
吉安水痕 · 8月1日

我安装总是不可以呢

回复

秦同学 · 8月2日

// 这样引入的Vue,编辑器会报错,说 export class MyComponent extends Vue中的Vue: Type 'any' is not a constructor function type....
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue{

}

// 这样就没问题

import Vue from 'vue'
export class MyComponent extends Vue{

}

请大神指点

回复

0

我也出现了这个问题,请问你的解决了吗

七七 · 9月23日
傷盡億萬少女心 · 8月17日

webpack 必须4.0以上啊~

回复

0

repo上的最新代码是4.0的,历史记录里有3.0的

三命 作者 · 8月18日
0

ts-loader文档里是这样描述的,please use ts-loader 3.x if you need webpack 2 or 3 support

付出 · 11月6日
casablancabear · 8月19日

You may be using an old version of webpack; please check you're using at least version 4
webpack版本是必须要4.0以上吗?

回复

0

repo上的最新代码是4.0的,历史记录里有3.0的

三命 作者 · 8月20日
0

使用 ts-loader 3.5

Kanni · 8月22日
Jiangnann · 8月27日

报错
This relative module was not found:

  • ./src/main.ts in multi ./build/dev-client ./src/main.ts

文件已经改过名字了 文件里面也改了

回复

0

有重现的repo么,现在依赖变了太多了,不好确定

三命 作者 · 8月27日
0

我也出现这个问题,请问有解决吗?急

Mr_liu · 10月30日
0

@Mr_liu
vue-shim.d.ts内容替换为

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
三命 作者 · 11月2日
lalajian · 9月11日

请问一下楼主,前言的图1 用是VS CODE编辑器吗? 装的是什么扩展代码这么好看。

回复

0

就一个主题,atom one dark

三命 作者 · 9月13日
sady_10 · 9月17日

请问一下computed 里的set()和get()怎么改成typescript? 我直接写get(){}好像不行

回复

0

我还真没试过重写set,试试在@components里面写

三命 作者 · 9月20日
载入中...