【2019-12-12】函数

函数是JavaScript应用程序的基础,它帮助你实现抽象层,模拟类,信息隐藏和模块。在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。

Typescript为JavaScript函数添加了额外的功能,让我们可以更容易的使用

1、函数类型

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。Typescript能够根据返回语句自动推断出返回值类型,因此我们通常省略它

 

 

 1-1、完整的函数类型

 

 

 函数类型包含两部分:参数类型学和返回值类型。当写出完整函数类型的时候,这两部分都是需要的。我们以参数列表的形式写出参数类型,为每个参数指定一个名字和类型。这个名字只是为了增加可读性,也可以改为其他的名字

第二部分是返回值类型。对于返回值,我们在函数和返回值类型之间使用(=>)符号,使之清晰明了。如之前提到的,返回值类型是函数类型的必要部分,如果函数没有返回值,你也必须指定返回值类型为void而不能留空

函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上,这些变量是函数的隐藏状态,并不是组成API的一部分

1-2、推断类型

 

 

 2、可选参数和默认参数

Typescript里的每个函数参数都是必须的。这不是指不能传递null或undefined作为参数,而是说编译器检查用户是否为每个参数都传了值。编译器还会假设只有这些参数会被传递进函数。

简短的说,传递给一个函数的参数个数必须与函数期望的参数个数一致

 

 JavaScript中,每个参数都是可选的,可传可不传。没传参的时候,它的值就是undefined.在Typescript中我们可以在参数名旁使用实现可选参数的功能。 

 

 可选参数必须跟在必须参数后面。如果上例我们想让first name是可选的,那么就必须调整他们的位置,把firstName放在后面

在Typescript里,我们也可以为参数提供一个默认值当用户没有传递这个参数或者传递的值是undefined时。它们叫做有默认初始化值的参数

 

 在所有必选参数后面的带默认初始化的参数都是可选的,与可选参数一样,在调用函数的时候可以忽略。也就是说可选参数与末尾的默认参数共享参数类型(firstName: string, lastName?: string)=> string 默认的参数默认值消失了,只保留它是一个可选参数的信息

与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。如果带默认值的参数出现在必须参数前面,用户必须明确的传入undefined值来获得默认值。例如

 

3、剩余参数

必要参数,默认参数和可选参数有个共同点,它们表示某一个参数。有时,你想同时操作多个参数,或者你并不知道会有多少个参数传递进来。在JavaScript里,你可以起使用arguments来访问所有传入的参数

在Typescript里,你可以把所有参数收集到一个变量里

 

 剩余参数会被当做个数不限的可选参数,可以一个都你没有,同样也可以有任意个。编译器创建参数数组,名字是你在这个省略号(...)后面给定的名字,你可以在函数体内使用这个数组

这个省略号也会在带有剩余参数的函数类型定义上使用到

 

 4、This

学习如何在JavaScript里正确使用this就好比是一场成年礼。由于Typescript是Javascript的超集,Typescript程序员也要弄清this工作机制并且当有bug的时候能够找出错误无所在。幸运的是,Typescript能通知你错误的使用了this的地方

4-1、this和箭头函数

JavaScript里, this的值在函数被调用的时候才会指定。这是个既强大又灵活的特点,但你需要花点时间弄清楚函数调用的上下文是什么,但众所周知,这不是一件简单的事,尤其是在返回一个函数或者将函数当做参数传递的时候

函数的默认调用者是window。所以可以看到this并非deck对象,而是被设置成了window(注意:在严格模式下,this为在undefiend),但是createCardPicker这个函数的调用者是deck,所以第一个this指的是deck对象

为了解决这个问题,我们可以在函数被返回时就绑定好正确的this,箭头函数可以保存函数创建时的this值,而不是调用时的值

 

 4-2、箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自已的this, arguments, super或者new.target。这些函数表达式更适用于那些本来需要匿名函数的地方

 

 语法

 

描述

引用箭头函数有两个方面的作用 : 更简短的函数并且不绑定this,所以箭头函数里面的this表示的是创建该函数时的this值

箭头函数不能用作构造器,和new一起使用会抛出错误

 

 函数体 

箭头函数可以有一个“简写体” 或常见的“块体”

 

 5、重载

为同一个函数提供多个函数类型定义来进行函数重载,编译器会根据这个列表去处理函数的调用

 

重载之后的fun22函数在调用时会进行正确的类型检查

为了让编译器能够选择正确的检查类型,它与Javascript里的处理流程类似。它查找重载列表,尝试使用第一个重载定义,如果匹配的话就使用这个。因此,在定义重载的时候,一定要把最精准的定义放在最前面 

注意 function fun22(x: any) : any 并不是重载列表的一部分,因为这里只有两个重载:一个是接收字符串,另一个接收数字

其他参数调用fun22会产生错误

 

 

 

 

 

原文地址:https://www.cnblogs.com/QQ-lala/p/12034301.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我最大的一个关于TypeScript的问题是,它将原型的所有方法(无论访问修饰符)编译.例classExample{publicgetString():string{return"HelloWorld";}privategetNumber():number{return123;}}众所周知,访问修饰符仅在编译时检
我对React很新,我正在尝试理解子组件之间相互通信的简洁方法.在一个简单的组件中,我知道我可以使用props将数据传递给子节点,并让子节点的回调将数据传递回父组件.在稍微复杂的情况下,当我在父组件中有多个子组件时,子组件之间的通信会有点混乱.我不确定我应该为同级别的儿童组
我有一个非常简单的表单,我将用户电子邮件存储在组件的状态,并使用onChange函数更新状态.有一个奇怪的事情发生在我的onChange函数用函数更新状态时,我在键入时在控制台中得到两个错误.但是,如果我使用对象更新状态,则不会出现错误.我相信用函数更新是推荐的方法,所以我很想知道为
我发现接口非常有用,但由于内存问题我需要开始优化我的应用程序,我意识到我并不真正了解它们在内部如何工作.说我有interfaceFoo{bar:number}我用这种类型实例化一些变量:letx:Foo={bar:2}Q1:这会创建一个新对象吗?现在,假设我想改变bar的值.我这样做有两种
我得到了一个json响应并将其存储在mongodb中,但是我不需要的字段也进入了数据库,无论如何要剥离不道德的字段?interfaceTest{name:string};consttemp:Test=JSON.parse('{"name":"someName","age":20}')asTest;console.log(temp);输出:{name:'someName
我试图使用loadsh从以下数组中获取唯一类别,[{"listingId":"p106a904a-b8c6-4d2d-a364-0d21e3505010","section":"section1","category":"VIPPASS","type":"paper","availableTi
我有以下测试用例:it("shouldpassthetest",asyncfunction(done){awaitasyncFunction();true.should.eq(true);done();});运行它断言:Error:Resolutionmethodisoverspecified.SpecifyacallbackorreturnaPromise;n
我正在一个有角度的2cli项目中工作,我必须创建一个插件的定义,因为它不存在它的类型.这个插件取决于已经自己输入的主库,它可以工作.无论如何,我有两个文件主要的一个图书馆类型文件AexportclassAextendsB{constructor(...);methodX():void;}我需要为我的
我有三元操作的问题:leta=undefined?"Defined!":"DefinitelyUndefined",b=abc?"Defined!":"DefinitelyUndefined",//ReferenceErrorc=(abc!==undefined)?"Defined!":"DefinitelyUndefin
下面的代码片段是30秒的代码网站.这是一个初学者的例子,令人尴尬地让我难过.为什么这样:constcurrentURL=()=>window.location.href;什么时候可以这样做?constcurrentURL=window.location.href;解决方法:第一个将currentURL设置为一个求值为window.location.href的
我是TypeScript和AngularJS的新手,我正在尝试从我的API转换日期,例如:"8/22/2015"…到ISO日期.将日期正确反序列化为Date类型的TypeScript属性.但是,当我尝试以下命令时(在typescript中,this.dateDisplay的类型为string)this.dateDisplay=formats.dateTimeValue.toISOString
我的名为myEmployees的数组中有5个名字,但是当我运行代码时,它只打印出其中的3个.我相信这种情况正在发生,因为脚本中的for循环覆盖了它在HTML文档中编写的前一行.我怎样才能解决这个问题?YearlyBulletinBoardAnnouncements!CongratulationstoTaylor,youhavebeenheref
我看到有一种方法可以在摩纳哥编辑器中设置scrolltop.如何滚动到特定行而不是特定像素?解决方法:如在文档中:https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.icodeeditor.html滚动到顶部,在px中:editor.setScrollPosition({scrollTop:0});滚动到特定
在从同一个类继承的一个数组中收集各种不同的对象时,如何在TypeScript中设置一个优等的类,以便TypeScript不显示错误?我正在尝试这样:interfaceIVehicle{modelName:string}interfaceICarextendsIVehicle{numberOfDoors:number,isDropTop:boolean}inte
什么是TypescriptTypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。作者是安德斯大爷,Delphi、C#之父(你大爷永远是你大爷)。把弱类型语言改成了强类型语言,拥有了静态类型安全检查,IDE智能提示和追踪,代码重构简单、可读性
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(五
1.1Typescript介绍1.TypeScript是由微软开发的一款开源的编程语言,像后端java、C#这样的面向对象语言可以让js开发大型企业项目。2.TypeScript是Javascript的超级,遵循最新的ES6、Es5规范(相当于包含了es6、es5的语法)。TypeScript扩展了JavaScript的语法。3.最新的Vu
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(
webpack.config.jsconstpath=require('path');constCopyWebpackPlugin=require('copy-webpack-plugin');constExtractTextPlugin=require('extract-text-webpack-plugin');const{CleanWebpackPlugin}=require('clean-webpac
我在这篇ECMAScriptpage上读到“class”是JavaScript的一部分.在这个关于TypeScript的页面上,我看到’class’也可以在Typescript中找到.我的问题是,开发未来JavaScript应用程序的正确方法是利用(a)JavaScript中的面向对象功能以及EMACScript7.0中可用的功能或(b)使用TypeScript