在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获取单选按钮的数据
Nov 27 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
javascript学习之json入门
Dec 22 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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 版获取重定向后的地址(代码)
2013/06/26 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
vue中axios封装使用的完整教程
2021/03/03 Vue.js
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
使用Python写CUDA程序的方法
2017/03/27 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
python脚本框架webpy的url映射详解
2021/11/20 Python