在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 Html结构转字符串形式显示代码
Nov 15 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue总线机制(bus)知识点详解
May 10 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP递归算法的简单实例
2019/02/28 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
诚信考试标语
2014/06/24 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python