jjzjj

Vue3通透教程【十二】TS类型声明优势

几何心凉 2023-10-09 原文

文章目录


🌟 写在前面

专栏介绍:
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下 Vue框架背后的故事尤大大对前端生态是这样看的,随着 Vue 框架不断的被认可,现如今的 Vue 框架已经是前端工程师必备的技能了,记得尤大大开发 Vue 的初衷,为了让自己的开发工作更加便捷,也希望这个框架能让更多人的开发工作变得轻松;现如今 Vue 框架做到了,尤大大做到了,当然在 20 年的 9 月 18 日,Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布!如今已经过去了两年多的时间,更多的公司选择了Vue3技术,所以凉哥也在这个时候为大家出这份专栏,本专栏将帮助大家掌握Vue3+TS技术,提升自己竞争力!

温故知新:
上篇文章中我们认识了TS,并且安装了TS编译器,让我们TS能够编译成JS运行到浏览器中,并且我们尝试了TS的一些编写语法,为变量声明类型,如果后续为声明类型的变量赋值为不同类型,会进行报错,这就是我们TS的严谨地方,对于我们后期运用到项目开发中很大程度帮助我们规避隐患,更利于项目稳定,本篇文章我们将继续学习TS的语法。 let’s coding!


🌟 上篇文章解惑

我们首先来回顾一下我们上篇文章中的编译内容,首先呢我们创建index.ts,然后编写下面简单的代码,就是通过let声明a、b两个变量,并且为变量设置类型number、string两种类型,然后我们通过tsc index.ts命令来将TS编译成为JS,能够运行到浏览器中,并且我们还知道如果我们的变量设置了类型后进行赋值不同类型会进行报错,这点我们上篇文章中进行了讲解,我们现在要看的是我们TS代码和编译后的JS代码来做对比:

let a:number=10
a=3
let b:string='几何'
console.log(a,b)

编译后

var a = 10;
a = 3;
var b = '几何';
console.log(a, b);

不知道大家有没有发现,我们的TS中运用的是let,而便宜出来的JS代码中变量声明的用的是var,这是为什么呢?其实我们在上篇文章中也有提及到的一点就是我们的TS可以编译成为多版本的JS,这样能够保证更好的兼容性,所以这里我们显然便宜的JS是ES3版本的,如果你想让JS中的声明用的也是let,那你就可以为编译器进行配置制定的JS的版本,这个我们后面来介绍,因为大家在上篇文章评论中有这个疑惑所以,这里大家知道这个原因就可以了。


🌟 JS函数中的隐患

上面为大家介绍的是我们普通的变量,其实对我们的隐患不是最大的,容易造成安全隐患的其实是我们JS中的函数,我们都知道函数可以传递参数,但是在JS中的参数是没有类型和个数的限制的,我们来看下面的例子,声明一个函数 addition 接收两个参数 num1,num2进行相加并返回。我们来看一下代码。

function addition (num1,num2){
  return num1+num2
}

console.log(addition(1,2))//结果3
console.log(addition('1',2))//结果'12'
console.log(addition(false,2))//结果2
console.log(addition({name:'几何'},2))//结果[object Object]2

上面的代码中呢我们看到了几个打印,再控制台中的结果,因为我们JS中的函数参数不考虑类型,所以我们可以看到一个求和函数中可以传递 字符串、布尔、对象等等其他不符合的格式,当然这里仅仅是一个相加操作,如果我们再大型项目中可能函数中会有大量的逻辑操作,如果出现一个不理想的类型值出现可能会造成生产环境中一连串的问题,因为JS的包容性很大,所以我们排查这类问题也是很费劲,这也就是说为什么存在安全隐患;不过TS的出现这些都不是问题,我们的TS的类型不仅仅可以用到变量身上,还可以用到参数和返回值的身上。


🌟 函数中的类型

函数中的参数类型

根据上面的案例,我们再TS代码中给函数的参数添加上类型的限制,两个参数均为number,这样我们再进行函数调用传参的时候就会出现报错,但是我们通过tsc index.ts命令编译的时候还是能够编译成功,当然这也是我们可以配置的,至少再我们开发过程中就给了我们提示,如果我们TS熟练后我们可以修改配置如果存在问题就不让编译,这样的话我们就能够将这种问题进行拦截,可以规避生产环境上一些不必要的坑。

另外的一点呢,我们在上面也说到了函数中不仅仅是参数的类型,关于参数的个数也是会进行报错提醒的,我们来看下面的代码,函数接收两个参数,如果我们传递一个或者三个都会波浪线进行提醒。

function addition (num1:number,num2:number){
  return num1+num2
}


console.log(addition(1,2))
console.log(addition(1))//报错
console.log(addition(1,2,3))//报错

函数返回值的类型

上面我们看到了函数中的参数的类型设置,那我们说除了函数的参数之外呢,我们可以对函数的返回值的类型也进行一个限制,看下面的代码我们在函数的括号后面设置上 number 类型,那他的返回值就是一个数字类型了,如果我们返回其他的会有错误提示不能将类型“string”分配给类型“number”


🌟 写在最后

大家看完这篇文章,相信大家对我们的TS有了更深一步骤的了解,本文内容主要涉及到TS的类型设置,一个是我们的变量,一个是我们的函数中,函数中又具有两个地方涉及到类型设置,分别是参数与返回值,大家可以下去后尝试一下哦!各位小伙伴让我们 let’s coding!

本期推荐 链接直达

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

有关Vue3通透教程【十二】TS类型声明优势的更多相关文章

  1. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin,我在Rails3应用程序的应用程序中有一个目录管理,其中包含模型和页面的声明。时不时地我也有一个类,当那个类有一个常量时,就像这样:classFooBAR="bar"end然后,我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗? 最佳答案 在纯Ruby中:classA

  2. ruby - Infinity 和 NaN 的类型是什么? - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN?它们是对象、关键字还是其他东西? 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  3. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样?我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗? 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时,它将引发ArgumentError。defmy_method(number)

  4. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  5. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如,CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  6. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  7. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  8. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

随机推荐