六、 函数function

函数

typescriptlang.org/docs/handbook/2/functions.html

和 JavaScript 一样，TypeScript 函数可以创建有名字的函数和匿名函数。你可以随意选择适合应用程序的方式，不论是定义一系列 API 函数还是只使用一次的函数。

js：

// 命名函数
function add(x, y) {
  return x + y
}

// 匿名函数
let myAdd = function(x, y) { 
  return x + y;
}

ts:

// 命名函数
function add(x: number, y: number): number {
    return x + y
}

// 匿名函数
let myAdd = function (x: number, y: number): number {
    return x + y;
}

函数类型 Function Type Expressions

函数表达式

// 函数别名
type MyAdd = (x: number, y: number) => number;

let add: MyAdd = (x, y) => x + y;

add(2, 3);

let sum: (x: number, y: number) => number = (x: number, y: number) => x + y;

sum(1, 23)

out

5
24

用接口定义函数的输入与输出

interface Iadd {
    (x: number, y: number): number;
}


// 不能将类型“(x: string, y: number) => string”分配给类型“Iadd”。
//   参数“x”和“x” 的类型不兼容。
//     不能将类型“number”分配给类型“string”
// let myAdd:Iadd =(x: string, y: number)=>x+y; // error 

//console.log(myAdd(2,'3')) // error 类型“string”的参数不能赋给类型“number”的参数


let myAdd: Iadd = (x: number, y: number) => x + y;

console.log(myAdd(2, 3));

out

5

可选参数、默认参数、可选参数的回调

https://www.typescriptlang.org/docs/handbook/2/functions.html#optional-parameters

可选参数

可选参数用?号代替

function add(x?:number){
    console.log(x);
}

add();
add(3);

out

undefined
3

默认参数

没传递的参数值为undefined,影响心情，所以提供一个默认值 y:number=10

function add(y:number=10,x?:number){
    console.log('y:'+y,',x:'+x);
}

add();
add(3,3);

out

y:10 ,x:undefined
y:3 ,x:3

可选参数的回调

function add(arr:number[],callback:(x:number,index?:number)=>void){
  
    for(let i=0;i<arr.length;i++){
        if(i<1)
        callback(arr[i],i);
        else
        callback(arr[i]);
    }
}

add([2,3,4],(x,index)=>{
    console.log('x:'+x,',index:'+index);
});

out

x:2 ,index:0
x:3 ,index:undefined
x:4 ,index:undefined

回调为函数类型的时候，尽量不要提供可选参数

剩余参数

https://www.typescriptlang.org/docs/handbook/2/functions.html#rest-parameters-and-arguments

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

在 TypeScript 里，你可以把所有参数收集到一个变量里,剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。

使用 ...的方式标示剩余参数

function add(x: number, ...y: number[]): number[] {
    let sum = y.map(z => x + z);
    console.log(sum)
    return sum;
}
add(2, 1, 3, 5);

out

[ 3, 5, 7 ]

函数重载

https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

函数重载: 函数名相同, 而形参不同的多个函数

function add(x: number, y: number): number;
function add(x: string, y: string): string;

function add(x: number | string, y: number | string): number | string {
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
}

console.log(add(2, 2));
console.log(add('2', '2'));

out

4
22

函数名称一样，参数个数不一样时候，用可选参数

function add(x: number): number;
function add(x: string, y: string): string;

function add(x: number | string, y?: string): number | string {
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' ) {
        return x 
    }
}

console.log(add(2));
console.log(add('2', '2'));

out

2
22