vue框架中props的typescript用法详解


Posted in Javascript onFebruary 17, 2020

什么是typescript

typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等。
typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript。

Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。

在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式。

javascript写法

Vue.component('blog-post', {
 // 在 JavaScript 中是 camelCase 的
 props: ['postTitle'],
 template: '<h3>{{ postTitle }}</h3>'
})

typescript写法

@Prop({
  type: Array,
  default: function(): Array<LabelData> {
   return [];
  }
 })
 label_list: Array<LabelData> | undefined;

typescript和javascript在用法的区别,主要是需要严格规定label_list的类型。

但是,在vue里面,prop是不能赋初始值的。这个规则和typescript会发生矛盾,因此定义类型需要加undefined,避免typescript转义告警。

在代码中使用label_list时,需要用label_list as Array的语法,转换成正常的数组格式

参考链接

vue props

vue-property-decorator

总结

以上所述是小编给大家介绍的vue框架中props的typescript用法详解,希望对大家有所帮助!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
JS的get和set使用示例
Feb 20 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
JS通用方法触发点击事件代码实例
Feb 17 #Javascript
JS前端广告拦截实现原理解析
Feb 17 #Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 #Javascript
Vue的双向数据绑定实现原理解析
Feb 17 #Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 #Javascript
You might like
PHP中的日期加减方法示例
2014/08/21 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
python去除所有html标签的方法
2015/05/05 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python中scikit-learn机器代码实例
2018/08/05 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
详解Django配置优化方法
2019/11/18 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
新闻编辑自荐信
2013/11/03 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis