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 相关文章推荐
学习jquery之一
Apr 27 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php实现httpclient类示例
2014/04/08 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
对javascript继承的理解
2016/10/11 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python模块学习 datetime介绍
2012/08/27 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python中PyQuery库用法分享
2021/01/15 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
.net面试题
2015/12/22 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
离婚协议书格式
2015/01/26 职场文书
长城英文导游词
2015/01/30 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书