Typescript(二)函数

非早起选手

已于 2022-03-01 23:15:25 修改

阅读量537

点赞数

分类专栏： TypeScript 文章标签：前端 typescript

于 2022-02-08 09:14:08 首次发布

本文链接：https://blog.csdn.net/zg0601/article/details/122817880

版权

TypeScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

上一篇文章中，我们初步认识了Typescript，学习了Typescript的基础类型，本文将学习Typescript函数。

一、函数定义

函数实一组一起执行一个任务的语句，就是包裹在花括号中的代码块，前面使用了关键词function。

1、声明式

语法格式如下：

function function_name()

{

    // 执行代码

}

2、匿名函数

语法格式如下：

const function_name = function()

{

    // 执行代码

}

二、函数中的参数

在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用，可以向函数中发送多个参数，每个参数使用逗号 , 分隔。

语法格式如下：

function func_name( param1 [:datatype], param2 [:datatype]) {

}

其中：

param1、param2 为参数名。
datatype 为参数类型。

实例：

function add(x:number,y:number):number{

    return x+y;

}

console.log(add(1,2));  //3

1、默认参数

——传入值会覆盖默认参数，不传值也行

语法格式如下：

function function_name(param1[:type],param2[:type] = default_value) {

}

注：参数不能同时设置为可选和默认。

实例：

function defaultParam(x:number,y:number=5){

    let mul = x * y;

    console.log('计算结果：',mul);

}

defaultParam(2);    //计算结果： 10

defaultParam(2,4);  //计算结果： 8

2、可选参数

——可以传可选的值也可以不用传，但是可选的参数必须放在参数列表的最后，如果都是可选参数就没关系

——可选参数使用问号标识 ?

实例：

function optionalParam1(x:string,y?:string){

    console.log(x+'和'+y);

}

optionalParam1('小明','小红');   //小明和小红

optionalParam1('小明');          //小明和undefined



function optionalParam2(x:string,y?:string){

    if(y){

        console.log(x+'和'+y);

    }else{

        console.log('只有'+x);

    }

}

optionalParam2('小明','小红');   //小明和小红

optionalParam2('小明');          //只有小明

3、剩余参数

——在我们不知道向函数中传入多少个参数时，就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入

——利用ES6的三点用算符

——相当于把参数赋值给一个数组，然后用循环遍历这个数组

——或者把传进来的第一个参数赋值给a，后面的放进数组

实例：

function buildName(firstName:string,...restOfName:string[]){

    console.log(firstName+' '+restOfName.join(' '));

}

buildName('小明','小红');               //小明 小红

buildName('小明','小红','小华','小白'); //小明 小红 小华 小白



function addNumbers(...nums:number[]){

    let sum:number = 0;

    for(let i=0;i<nums.length;i++){

        sum += nums[i];

    }

    console.log('和：',sum);

}

addNumbers(1,2,3);                  //和： 6

addNumbers(10,10,10,10,10,10);      //和： 60

三、函数的返回值

1、没有返回值的函数（类型为空）

实例：

function getInfo(name:string,age:number):void{ 

    //当函数不需要返回数据时，返回类型就是空（void）

    console.log('姓名：'+name+' 年龄：'+age);

}

getInfo('张三',20);    //姓名：张三 年龄：20

2、推断类型

——ts自动识别类型（按上下文归类）

实例：

function add(x:number,y:number){   

    //ts会自动识别出返回类型是number

    return x+y;

}

console.log(add(1,2));  //3

四、函数的调用

ts的函数调用和普通的函数调用没有区别，可以在函数名后面加括号调用，也可以用call,apply,bind来调用。

1、call()和apply()

是预定义的函数方法，两个方法可用于调用函数，第一个参数必须是对象本身。

call()实例：

function myFunction2(x:any,y:any) {

    return x * y;

}

console.log(myFunction2.call(null,2,5));    //10

let obj1 = myFunction2.call(Object,2,5);

console.log(obj1);  //10

apply()实例：

function myFunction3(x:any,y:any){

    return x*y;

}

console.log(myFunction3.apply(null,[2,5])); //10

2、普通函数调用

实例：

function myFunction1(x:any,y:any){

    return x*y;

}

console.log(myFunction1(2,5));  //10

五、函数的重载

函数的重载是使用相同的名称和不同的参数数量或类型实现不同的功能。

每个重载方法（或者构造函数）都必须有一个独一无二的类型参数列表。

参数类型不同：

function disp(n:string):void;

function disp(n:number):void;

参数数量不同：

function disp(n1:number):void;

function disp(n1:number,n2:number):void;

参数类型顺序不同：

function disp(n1:number,s1:string):void;

function disp(s:string,n:number):void;

注：如果参数类型不同，则参数类型应设置为any；参数数量不同可以将不同的参数设置为可选参数。

定义函数重载需要定义重载签名和实现签名。

——重载签名定义函数的形参和返回类型，没有函数体。

——一个函数可以有多个重载签名（不可调用）。

实例：

//重载签名

function disp(n:number):void;

function disp(s:string):void;

function disp(n1:number,s1:string):void;

function disp(s:string,n:number):void;



//实现签名

function disp(x:any,y?:any):void{

    console.log(x+' '+y);

}

disp(123);          //123 undefined

disp('abc');        //abc undefined

disp(456,'xyz');    //456 xyz

disp('abc',789);    //abc 789