在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 相关文章推荐
常用js脚本
Dec 03 Javascript
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
js前端图片加载异常兜底方案
Jun 21 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
谈一谈收音机的高放电路
2021/03/02 无线电
php session_start()出错原因分析及解决方法
2013/10/28 PHP
javascript json 新手入门文档
2009/12/03 Javascript
js href的用法
2010/05/13 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2014年学校工作总结
2014/11/20 职场文书
质量保证书
2015/01/17 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
大学生团日活动总结
2015/05/06 职场文书
工作证明书
2015/06/15 职场文书
车间安全生产管理制度
2015/08/06 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL