3、你能读得懂的TypeScript教程之函数
函数同样是TypeScript的基础之一。通过函数你可以将重合的功能代码块进行封装,而后在你需要它的时候调用就可。换句话说函数就是具备某一功能的代码块,它的使命是将你臃肿的代码变的更加苗条。
首先,咱们先来回顾一下之前在JS中是如何创立函数以及实现调用的:
1、函数公告:
function fn (a,b){ return a + b;}
2、函数表达式:
let fn = function (a,b) { return a + b;}
3、箭头函数:
var fn = (a,b) => a + b;// 函数调用 console.log(fn(1,2))
注:以上创立函数的方式在TypeScript中也是支持的。
一、TypeScript中的函数是有类型的
函数的类型分为参数类型与返回值类型。
1、参数类型:通过在参数后加冒号指定参数类型
函数公告:
function fn (a:number,b:number){ return a + b;}
函数表达式:
var fn = function (a:number,b:number) { return a + b;}
箭头函数:
let fn = (a:number,b:number) => a + b;
注意:只有参数类型是匹配的,那么该参数才是有效的。
fn(1,2);// 正确// A function whose declared type is neither 'void' nor 'any' must return a value.fn("1",true);// error
假如参数类型不确定,可以将类型设置为any
:
let fn = (a:any,b:any) => a + b;fn("1",true);
2、返回值类型:顾名思义,用于指定返回值的类型。写法仍然是通过冒号指定返回类型。
函数公告:
function fn (a:number,b:number) : number { return a + b;}
函数表达式:
let fn = function (a:number,b:number) : number { return a + b;}
箭头函数:
var fn = (a:number,b:number) :number => a + b;
返回的类型肯定要与你指定的类型匹配,否则编译是不会通过的,如:
// Type 'string' is not assignable to type 'number'.var fn = (a:number,b:number) :number => a + b + "1";
假如没有返回值,需要指定类型为void:
var fn = function (a:number,b:number) : void{ console.log(a + b);}
假如你指定了返回类型为void,却偏偏要返回值,那是在找死,一样不会编译通过,如:
//'number' is not assignable to type 'void'.var fn = function (a:number,b:number) : void{ return a + b;}
自然,你指定了非void类型,却没有返回值,仍然是在找死:
// A function whose declared type is neither 'void' nor 'any' must return a value.var fn = function (a:number,b:number) : number{ console.log(a + b);}
二、完整函数类型
注意:Typescript具备类型推断机制,也就是说假如我们不指定变量的类型,ts会自行对该值的类型进行推断。例如以下代码会自行推断为string类型:
let siteName = "http://www.zhangpeiyue.com";console.log(typeof siteName);// string
在之前的例子当中,通过表达式与箭头函数创立的函数是可以通过编译的。我们也只是对等号右侧的匿名函数进行了类型定义。而等号左边的 fn并没有增加类型,其类型是通过赋值操作自行推断出来的。
完整写法:
在函数和返回值类型之间使用(=>
)符号,
let fn: (a: number, b: number) => number = function (a: number, b: number): number { return a + b; };
只需参数类型是匹配的,便是有效的函数类型,与参数名称能否对应无关,以下也是正确的:
let fn: (num1: number, num2: number) => number = function (a: number, b): number { return a + b; };
三、函数参数都是必需的
在JavaScript中,传递的参数是可选的,可传可不传,当我们没有传参的时候,它的值是undefined。 但是在TypeScript中我们传递给一个函数的参数个数必需与函数接收的参数个数一致,类型也需要一致。
function fullName(firstName: string, lastName: string) { return firstName + lastName;}// 张三console.log(fullName("张","三"));// 传递类型不同:error Argument of type '3' is not assignable to parameter of type 'string'.console.log(fullName("张",3));// 传递个数少1:error Expected 2 arguments, but got 1.console.log(fullName("王"));//传递个数多1:error Expected 2 arguments, but got 3.console.log(fullName("张","培","跃"));
四、可选参数
在上面的示例当中,我们知道传递的参数个数需要与函数接收的个数一致。那么有没有办法实现参数的可先呢?当然有!我们只要要在参数旁增加一个?
就可。比方,我们让last name是可选的:
function fullName(firstName: string, lastName?: string) { return firstName + lastName;}// 张三console.log(fullName("张","三"));// 王undefinedconsole.log(fullName("王"));//error Expected 1-2 arguments, but got 3.console.log(fullName("张","培","跃"));
五、默认参数
通过上例可知,当可选参数未传递时,默认值为undefined
。假如我们想要指定默认值的话,增加=
就可
function fullName(firstName: string, lastName: string = "六") { return firstName + lastName;}// 张三console.log(fullName("张","三"));// 王六console.log(fullName("王"));//error Expected 1-2 arguments, but got 3.console.log(fullName("张","培","跃"));
六、剩余参数
假如我们不知道有多少参数传递进来怎样办呢?
在JS中我们可以通过arguments来接收,而在TS中我们可以通过…(三个小数点)来将剩余的参数放到一个数组中。比方
function fullName(firstName: string, ...lastName: string[]) { return firstName + lastName.join("");}// 张三console.log(fullName("张","三"));// 王六console.log(fullName("王"));// 张培跃console.log(fullName("张","培","跃"));
七、方法重载(Overload)
函数重载是指同一个函数,根据传递的参数不同,会有不同的体现形式。注意在JS当中是不支持重载的。在TS中是提供了重载功能的,但是这个重载功能和C#或者者java等语言的重载相比是不完整的。
TypeScript的函数重载共用一个函数体,也就是说无论公告多少个同名的函数,它们共同使用同一个函数体,在调用时会根据传递参数类型的不同,而执行这一个函数体。例如:
function fn(name: string): string;function fn(age: number): number;function fn(nameorage: any): any { if (typeof nameorage == "string") { return "姓名:" + nameorage; } else if (typeof nameorage == "number") { return "年龄:" + nameorage }}// 姓名:张培跃console.log(fn("张培跃"));// 年龄:18console.log(fn(18));
共用的函数体:
if (typeof nameorage == "string") { return "姓名:" + nameorage;} else if (typeof nameorage == "number") { return "年龄:" + nameorage}
编译之后的JS:
function fn(nameorage) { if (typeof nameorage == "string") { return "姓名:" + nameorage; } else if (typeof nameorage == "number") { return "年龄:" + nameorage; }}console.log(fn("张培跃"));console.log(fn(18));
好了,今天的分享就到这里,肯定要多练习哦。
[公众号回复“电子书”,送你经典前台电子书籍]
—————END—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 3、你能读得懂的TypeScript教程之函数