TypeScript中函数 的定义和使用

1. 函数的定义

1.1 普通函数

// 语法
function Fn1(形参1:类型,形参2:类型...):返回值数据类型 {
    ......
        函数体
    ......
    
    return n1 + n2;
}
function Fn1(n1:number,n2:number):number {
    return n1 + n2;
}

1.2 箭头函数

let Fn1 = (形参1:数据类型,形参2:数据类型...):返回类型{
     ......
        函数体
    ......
    
    return n1 + n2;
}
let Fn1 = (n1: number,n2:number):number=>n1 + n2

2. 定义函数结构的约束

// 1. 定义函数的参数数据类型，及返回值
let Fn3:(n1:number,n2:number)=>number;
// 2. 实现函数体
Fn3 = (n1:number,n2:number)=>{
    return n1 + n2
}

当然也可以在定义的时候实现函数的结构

let Fn3(n1:number,n2:number)=>number = (n1:number,n2:number) =>{
    return n1 + n2;
}

也可以使用类型别名的方式进行定义

type Fun = (n1:number,n2:number) => number;
let Fn3:Fun = (n1:number,n2:number)=>{
    return n1 + n2;
}

3. 设置函数的默认值

在es6中对于函数的默认值可以直接在形参中进行设置，例如：

// js
function sum(a,b=0){
    return a + b
}

同样的typeScript中也是可以的

// ts
function sum(a:number,b:number=0):number{
return a + b
}

4. 剩余参数

在js中可以使用arguments 进行将参数进行收集，或者使用过es6中的扩展运算符（...）进行处理，例如：

// js
function sum(){
    let sum = 0;
    for(var i = 0;i<arguments.length;i++){
        sum += arguments[i]
    }
    return sum
}
// 或者
function sun(...args){
     let sum = 0;
    for(var i = 0;i<args.length;i++){
        sum += args[i]
    }
    return sum
}

在typeScript中可以使用扩展运算符将剩余参数收集到一个数组中

function handlerArr(x:number,...args:number[]){
    
}

5. 函数重载

函数的参数类型或数量不同时，会有不同的返回值，函数重载就是定义这种 不同情况的函数。

重载签名

重载签名是对函数的定义，定义不同的参数和返回值，但是没有具体的函数体的实现。

// 定义重载
function handlerData(x:string):string[];
function handlerData(x: number):number[];

实现签名

实现签名是对函数功能的实现。

function handlerData(x:any){
    if(typeof x === "string"){
        return x.split("");
    }else {
        return x.toString().split("").map((item:string)=> +item);
    }
}
​
console.log(handlerData("123")) // ["1","2","3"]
console.log(handlerData(123)) // [1,2,3]

以上就是在typeScript中函数的大致定义和实现。