福州网站建设免费咨询最近新闻热点国家大事

基本使用

ts与js一样拥有具名函数和匿名函数两种函数类型。但是ts的函数需要提前定义好参数类型以及函数的返回值类型。

具名函数

function add(num1: number, num2: number):number {return num1 + num2
}

匿名函数
匿名函数的定义相对麻烦，我们需要提前定义函数的类型

// 直接使用类型推导
//const add = (num1: number, num2: number):number => {
//    return num1 + num2
//}
// 还可以反向类型推导
//const add: (num1: number, num2: number) => number = (x, y) => x + y
const add: (num1: number, num2: number) => number = (num1: number, num2: number):number => num1 + num2

函数参数

ts里面每个函数参数都是必须的，函数参数的数量与类型必须完全一致才可以使用函数。

function add (num1: number, num2: number):number {return num1 + num2
}
// add('1')  Expected 2 arguments, but got 1.
// add('1', 1) Argument of type 'string' is not assignable to parameter of type 'number'.
add(1, 1) 

我们也可以使用?指定一个函数参数非必传，当然这种参数需要放到所有参数的末尾。

function add (num1: number, num2: number, num3?:number):number {return num1 + num2 + (num3 ? num3 : 0)
}
console.log(add(1, 1) )    // 2
console.log(add(1, 1, 1) ) // 3

我们还可以给函数参数设置默认值

function add (num1: number, num2: number, num3:number = 0):number {return num1 + num2 + num3
}
console.log(add(1, 1) )   // 2
console.log(add(1, 1, 1) )// 3

事实上如果给末尾的参数设置默认值效果是等同于在末尾使用?指定非必传参数的

在js里面如果我们并不知道将会有多少参数传入，可以使用arguments进行所有参数的接收，也可以使用es6...的方式收集到数组里。
而在ts里面我们同样可以这样操作

function add (num1: number, num2: number, num3:number = 0):number {console.log(arguments) // {‘0’： 1, '1': 2}return num1 + num2 + num3
}
console.log(add(1, 1) )

function add (num1: number, ...arg:number[]):number {console.log(arg) // [2,3,4]return num1 
}
console.log(add(1, 2, 3, 4) )

函数重载

所谓函数重载，就是指的是拥有多个函数签名，一个函数体实现。

function calculateAverage(nums: number[]): number;
function calculateAverage(str: string): number;
function calculateAverage(arrOrStr: number[] | string): number {if (Array.isArray(arrOrStr)) {let sum = arrOrStr.reduce((a, b) => a + b);return sum / arrOrStr.length;} else {let nums = arrOrStr.split(',').map(Number);let sum = nums.reduce((a, b) => a + b);return sum / nums.length;}
}console.log(calculateAverage([1, 2, 3])); // 输出结果为 2
console.log(calculateAverage("1,2,3")); // 输出结果为 2