在Vue.js中使用TypeScript的方法


Posted in Javascript onMarch 19, 2020

虽然 vue2.x 对TypeScript的支持还不是非常完善,但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next 看,为TS提供更好的官方支持应该也会是一个重要特性,那么,在迎接3.0之前,不妨先来看看目前版本二者的搭配食用方法吧~

创建项目

  • 虽然GitHub上有各种各样相关的Starter,但是使用 Vue CLI 应该是目前相对比较好的方式,在使用 vue create 创建新项目时,对 preset 选择 Manually select features 选项,之后添加 TypeScript
  • 如果想在vue应用中完整使用ES6中提供的类特性,那么在 class-style component syntax 处选择Y(本文主要介绍选择Y的情况)
  • 对于 Babel 来说,一般情况选择使用,而 linter / formatter 的具体选择可根据项目需求,此处不多说明

进入项目

创建完成后,看一看 package.json ,可以发现 vue-class-componentvue-property-decorator 以及其他ts相关的modules都已被添加,其中: vue-class-component 可以让你使用class-style语法创建组件,比如以下代码:

<template>
 <div>
 <button @click="decrement">-</button>
 {{ count }}
 <button @click="increment">+</button>
 </div>
</template>

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

 // Define the component in class-style
 @Component
 export default class Counter extends Vue {
 // Class properties will be component data
 count = 0

 // Methods will be component methods
 increment() {
  this.count++
 }

 decrement() {
  this.count--
 }
 }
</script>

vue-property-component 则完全依赖于前者,提供了除 @Component 外的其他几种装饰器,比如 @Prop

import { Vue, Component, Prop } from 'vue-property-decorator'

 @Component
 export default class YourComponent extends Vue {
 @Prop(Number) readonly propA: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

再来一个二者结合的简单例子吧:

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h1>{{ fullName }}</h1>
 <button @click="reverseStr()">Reverse</button>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
 firstName = "rapt";
 lastName = "azure";

 mounted() {
 console.log('mounted');
 }

 // Computed property
 get fullName(): string {
 return this.firstName + this.lastName;
 }

 // Method
 reverseStr() {
 this.firstName = this.firstName.split('').reverse().join('');
 this.lastName = this.lastName.split('').reverse().join('');
 }

}
</script>
  • 此时,你的vue项目已经有fully-typed的可能了,当然也会有更好的自动补全以及错误提示。
  • 为了更好的确定类型,可以创建例如 interfaces 这样的文件夹,充分利用ts的接口和类来使项目有更好的组织结构,可读性和维护性。

另一种选择

其实当然也可以不使用class风格啦,这样的话,就和平时熟悉的vue更为相似了,而对类型当然也是完全支持的。
这里也提供一个简单的例子吧~<template>

<div class="hello">
  <h1>{{ msg }}</h1>
  <h1>{{ test }}</h1>
 </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
 name: 'HelloWorld',
 props: {
  msg: String,
 },
 data() {
  return {
   test: "Hello from TS" as string
  }
 },
 methods: {
  pressMe(): string {
   return this.test + 'br'
  }
 }
});
</script>

其他的话

  • 本文只是简要探讨了在Vue.js中使用TypeScript的可能性,更多的相关内容在 官方文档 里可以找到哦,或者也可以多去Github的Vue区,TS区逛逛呢~
  • TypeScript的出现为JavaScript的生态带来了新活力,不管是前端三大框架Vue,React,Angular,还是Node系的后端框架比如Nest和Express,都在积极拥抱TS,希望以后整个生态会发展得越来越好吧~

总结

到此这篇关于在Vue.js中使用TypeScript的文章就介绍到这了,更多相关Vue.js使用TypeScript内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
You might like
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js中settimeout方法加参数
2014/02/28 Javascript
javascript时间函数大全
2014/06/30 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue组件与复用详解
2018/04/08 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现合并两个数组的方法
2015/05/16 Python
深入理解Python中字典的键的使用
2015/08/19 Python
对python 命令的-u参数详解
2018/12/03 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
抗震救灾标语
2014/06/26 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
员工工作自我评价
2014/09/26 职场文书
不同意离婚上诉状
2015/05/23 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python