使用 typescript ,提升 vue 项目的开发体验(1)
此文已由作者张汉锐授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
前言:对于我们而言,typescript 更像一个工具
官方指南
从 vue2.5 之后,vue 对 ts 有更好的支持。根据官方文档,vue 结合 typescript ,有两种书写方式:
Vue.extend
import Vue from 'vue' const Component = Vue.extend({ // type inference enabled
})
Class-style Vue Components
import Vue from 'vue'
import Component from 'vue-class-component' // The @Component decorator indicates the class is a Vue component
@Component({ // All component options are allowed in here
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue { // Initial data can be declared as instance properties
message: string = 'Hello!' // Component methods can be declared as instance methods
onClick (): void { window.alert(this.message)
}
}
理想情况下,Vue.extend 的书写方式,是学习成本最低的。在现有写法的基础上,几乎 0 成本的迁移
// 现在常见的写法export default { // your code }
但「理想丰满,现实骨感」,问题出在:
Vue.exend 在和 vuex 和 mixins 结合使用的时候,无法发挥 ts 的作用,vuex 和 mixins 会在项目中大量使用,这个问题不能忽视。
Vue.extend + vuex + mixins 问题的介绍
Vue.extend + vuex 的问题
由于 vuex 使用 mapState, mapActions 等方法的时候,通过字符串形式做映射,这个过程中,丢失了类型信息。下面的 gif 可以看到,整个过程中:
无法做代码提示
无法对对应的 actions 和 state 做类型声明,使得类型检查生效
无法使用重构
显然,如果只有一部分的方法和属性得到了代码提示和类型检查,就是失去了使用 typescript 意义。
在 Vue.extend + vuex 写法下,这个问题暂时没有解决方案。
Vue.extend + mixins 的问题
同样的问题,在 mixin 中定义的方法,不会被 typescript 识别到,下面 gif 可以看到,不仅仅「代码提示」「类型检查」「代码重构」没有工作,甚至因识别不到 test 而报错
Class-Style Components
那么就剩下 Class-Style Components 方案。当然,这个方案需要做额外的工作才能够让「vue 全家桶 + ts」良好的工作。
原理:将属性直接挂载在 class 上,使得 typescript 能够良好的进行「代码提示」和「类型检查」。然后再通过装饰器将属性转成 vue 上的属性。
例如 @Prop, @Watch, @Action 等装饰器,将属性做相应的转换成 props, watch, mapActions 里面的值,具体后面例子展示。
vue-class-component
这里库提供最基础的 vue 装饰器:@Component 。其他的 vue 装饰器库,都在这个库的基础上做扩展和修改。看看官网的例子:
import Vue from 'vue'import Component from 'vue-class-component'// @Component 会将 MyComponent 中的属性,转换成 vue 对应的属性@Component({ // Vue 所有的属性都可以在这里声明,一般用到的比较少
template: '<button @click="onClick">Click!</button>'})
export default class MyComponent extends Vue { // @Component 将 message 转成成 data
message: string = 'Hello!' // @Component 会将这里的 getter 属性,转换成 computed
get name(){ return 'anders'
} // @Component 识别到 created 是声明周期关键字,不做处理
created(){} // @Component 识别到 onClick 不是关键字,将它转成 methods
onClick (): void { window.alert(this.message)
}
}
vue-property-decorator
这个库提供了:
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
其中常用的: @Prop,@Watch,@Emit。 看例子:
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'const s = Symbol('baz') @Component
export class MyComponent extends Vue { @Emit()
addToCount(n: number){ this.count += n } @Emit('reset')
resetCount(){ this.count = 0 } @Prop()
propA: number @Prop({ default: 'default value' })
propB: string @Prop([String, Boolean])
propC: string | boolean @Watch('child')
onChildChanged(val: string, oldVal: string) { } @Watch('person', { immediate: true, deep: true })
onPersonChanged(val: Person, oldVal: Person) { }
}
上面的使用就相当于:
const s = Symbol('baz') export const MyComponent = Vue.extend({
name: 'MyComponent', props: {
checked: Boolean,
propA: Number,
propB: {
type: String, default: 'default value'
},
propC: [String, Boolean],
}, methods: {
addToCount(n){ this.count += n this.$emit("add-to-count", n)
},
resetCount(){ this.count = 0
this.$emit("reset")
},
onChildChanged(val, oldVal) { },
onPersonChanged(val, oldVal) { }
},
watch: { 'child': {
handler: 'onChildChanged',
immediate: false,
deep: false
}, 'person': {
handler: 'onPersonChanged',
immediate: true,
deep: true
}
}
})
更加全面的用法参考文档:vue-property-decorator
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 iOS安装包瘦身(上篇)
使用 typescript ,提升 vue 项目的开发体验(1)的更多相关文章
- 使用 typescript ,提升 vue 项目的开发体验(2)
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. vuex-class 提供了和 vuex 相关的全部装饰器,从而解决了上面 Vue.extend + vue ...
- TypeScript编写Vue项目结构解析
使用TypeScript编写Vue项目也已经有了一段时间,笔者在刚刚使用TypeScript时候也是很茫然,不知道从何下手,感觉使用TypeScript写项目感觉很累赘并不像JavaScript那么灵 ...
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- 教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- 使用TypeScript创建Vue项目
Vue的灵活性总是让代码看起来非常洗练,对TypeScript来说也是一种挑战, 好在Vue对TypeScript进行了一次全方位的适配. 相对于React严谨的代码,Redux啰嗦的样板代码,Vue ...
- 加快Vue项目的开发速度
巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个 ...
随机推荐
- Vue.js:目标结构
ylbtech-Vue.js:目标结构 1.返回顶部 1. Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: ...
- verilog 之语法学习
1.使用非基数表示的十进制视为有符号数.使用基数表示的十进制被视为无符号数. 2.线网中的值被解释为无符号数,整型寄存器中的值被解释为有符号的二进制补码数,. 3.如果选择表达式的值为 x.z,或越界 ...
- window下配置Solr6.5以及IK Analyzer分词配置
一.安装准备及各软件使用版本说明: 1.下载jdk,我下载的版本是jdk-8u121-windows-x64.exe,下载地址: http://www.oracle.com/technetwork/j ...
- 爬了个爬(三)Scrapy框架
参考博客:武Sir Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 ...
- python----python使用mysql
Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymql pymsql是Python中操作MySQL的模块,在windows中的安装: pip ...
- redis学习六 集群的原理(转载)
转载自 http://shift-alt-ctrl.iteye.com/blog/2285470 一.Redis Cluster主要特性和设计 集群目标 1)高性能和线性扩展,最大可以支撑到1 ...
- 03-CSS中的选择器
高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器 , 顾名思义 父元素的后代(包括儿子,孙子,重孙子) 中间空格隔开 是后代 .container ...
- 如何搭建自己的SPRING INITIALIZR server
这两天在慕课学Spring boot ,用idea通过spring initializr新建项目 即使用代理连不上.无奈. 参考了 GitHub - spring-io/initializr: A w ...
- zookeeper集群安装的奇怪现象
zookeeper:配置的集群信息是domain:端口2888:端口3888: domain为内网静态ip:每次启动都不能相互连接报错误: [myid:3] - WARN [WorkerSende ...
- Java 计算两个日期相差的天数
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...