专栏首页张培跃3、你能读得懂的TypeScript教程之函数

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));

好了,今天的分享就到这里,一定要多练习哦。

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js如何设置允许跨域

    用户1272076
  • Airbnb 宣布放弃使用 React Native,回归使用原生技术

    Airbnb 表示,尽管很多团队都依赖 React Native 并计划在可预见的将来使用它,但他们最终还是无法实现最初的目标。此外,还有一些他们无法克服的技术...

    用户1272076
  • JavaScript面试题补充(6---10)

    上面的代码考察了一个非常重要的 JavaScript 概念:闭包(Closures)。对于每一个JavaScript开发者来说,如果你想在网页中编写5行以上的代...

    用户1272076
  • JS思维导图!前端后台都可以看的!

    JS思维导图,JS玩的不好的可以试试这个,你会感谢我的! ? ? ? ? ? ? ? ?

    思梦php
  • 测试2

    经过过去几年的建设,我国的大中型城市都安装了很多监控摄像头,通过路段的感知,可以基于原有监控系统获取到道路的总体交通路况,通过这种车辆检测技术就可以为道路路况分...

    冲天大企鹅仔仔
  • ES6之函数的扩展

    正常情况下没有问题,但是要是a是0或者是false等会被转换成Boolean类型false的时候就会出错。ES6对参数的默认值允许直接设置:

    wade
  • 第十四节 springcould zuul边缘路由的使用

    其他具体配置及功能可参考源码zuul服务源码 需要说明需要启动本zuul项目,需要依赖eureka server、security-server、以及其他业务...

    用户1418372
  • 怎么优雅的选择 MySQL 存储引擎

    对于数据库这一块询问比较多的就是在 MySQL 中怎么去选择一种何时当前业务需求的存储引擎,而 MySQL 中支持的存储引擎又有很多种,那么 MySQL 中分别...

    Debug客栈
  • ASP.NET Core中的依赖注入(5):ServicePrvider实现揭秘【补充漏掉的细节】

    到目前为止,我们定义的ServiceProvider已经实现了基本的服务提供和回收功能,但是依然漏掉了一些必需的细节特性。这些特性包括如何针对IServiceP...

    蒋金楠
  • 机器学习:提升树(boosting tree)算法的思想

    《实例》阐述算法,通俗易懂,助您对算法的理解达到一个新高度。包含但不限于:经典算法,机器学习,深度学习,LeetCode 题解,Kaggle 实战。期待您的到来...

    double

扫码关注云+社区

领取腾讯云代金券