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获取提交的字符串的字节数
Feb 09 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
javascript实现简单的进度条
Jul 02 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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
smarty自定义函数用法示例
2016/05/20 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python 杀死自身进程的实现方法
2019/07/01 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
岗位竞聘书范文
2014/03/31 职场文书
设计顾问服务计划书
2014/05/04 职场文书
洗手间标语
2014/06/23 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2014年话务员工作总结
2014/11/19 职场文书
同意落户证明
2015/06/19 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
MySQL七种JOIN类型小结
2021/10/24 MySQL