【TS】函数类型

函数的类型实际上指的是：函数参数和返回值的类型

一、函数类型

1.1、指定函数参数类型

// 函数声明（Function Declaration）
function sum(x:number, y:number) {
    return x + y;
}
sum(1,2)	// 正确
sum('1',2)	// 报错，x、y类型必须都是设置的number类型

// 函数表达式（Function Expression）
let mySum = function (x:number, y:number) {
    return x + y;
};
mySum(1,2)		// 正确
mySum('1',2)	// 报错，x、y类型必须都是设置的number类型

1.2、指定函数返回值类型

// 函数声明（Function Declaration）
function sum(x, y):number {
    return x + y;
}
sum(1,2)	// 正确
sum('1',2)	// 报错，'1',2 进行的是字符串拼接，所以返回值是string，不是设置的number类型

// 函数表达式（Function Expression）
let mySum = function (x, y):number {
    return x + y;
};
mySum(1,2)		// 正确
mySum('1',2)	// 报错，'1',2 进行的是字符串拼接，所以返回值是string，不是设置的number类型

1.3、单独指定参数、返回值类型

// 普通函数形式
function add1 (num1: number, num2: number): number {
	return num1 + num2;
}
// 箭头函数形式
const add2 = (num1: number, num2: number): number => {
	return num1 + num2;
}

1.4、同时指定参数、返回值类型

• 当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。
• 这种形式只适用于函数表达式。

const add:(num1: number, num2: number)=>number = (num1,num2)=>{
	return num1 + num2;
}

1.5、指定函数没有返回值（void）

• 如果函数没有返回值，那么，函数返回值类型为：void。

function greet1(name: string): void{
	console.log('Hello',name)
}

const greet2: (name: string)=>void = (name) => {
	console.log('Hello',name)
} 

二、参数设置

2.1、可选参数

• 输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？
• 我们用 ? 表示可选的参数

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');	// 打印结果：'Tom Cat'
let tom = buildName('Tom');				// 打印结果：'Tom '

• 需要注意的是，可选参数必须接在必需参数后面

function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.
// 翻译：错误TS1016:一个必需的参数不能跟随一个可选参数

2.2、默认参数

• 在 ES6 中，我们允许给函数的参数添加默认值。
• 而 TypeScript 会将添加了默认值的参数识别为可选参数：

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Caa');	// 打印结果：'Tom Caa'
let tom = buildName('Tom');				// 打印结果：'Tom Cat'

• 但是此时就不受「可选参数必须接在必需参数后面」的限制了：

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');	// 打印结果：'Tom Cat'
let cat = buildName(undefined, 'Cat');	// 打印结果：'Tom Cat'

2.3、剩余参数

• ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);
console.log(a)	//  [1, 2, 3]

• 事实上，items 是一个数组。所以我们可以用数组的类型来定义它：

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

• 注意：rest 剩余参数只能是最后一个参数