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 left,right,mid函数
Jun 10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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生成静态HTML文档的原理
2012/10/29 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
JavaScript中的类继承
2010/11/25 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
手机端转换rem适应
2017/04/01 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
es6中比较有用的7个技巧小结
2019/07/12 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python argv用法详解
2016/01/08 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
详细分析Python垃圾回收机制
2020/07/01 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python常用外部指令执行代码实例
2020/11/05 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
晚会邀请函范文
2014/01/24 职场文书
总经理的岗位职责
2014/02/23 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书