TypeScript：ts函数，可选参数，默认参数，剩余参数

创建函数

在 TypeScript 中，可以通过两种方式创建函数。 

函数声明

这些是以传统 JavaScript 风格编写的命名函数。

function showMyName(name:string):string {
    return `Hi ${name}`
}
console.log(showMyName('Lokesh'));  //Hi Lokesh

函数表达式

这些函数没有名称。 他们被分配给：

let showMyName = function(name:string):string {
    return `Hi !${name}`
}
console.log(showMyName("Lokesh")); //Hi !Lokesh

函数类型

在 TypeScript 中，一切都是类型，函数也是类型。 您可以将变量的类型声明为Function，如下所示。

let showMyName: Function = function(name: string): string { 
    return `Hi! ${name}`; 
};

在上面的示例中，showMyName是只能指向Function类型的变量。

❗️注意: 如果您未指定变量类型，TypeScript 会自动推断类型。

可选参数

与 JavaScript 不同，如果我们尝试调用一个函数而不提供其签名声明的确切数量和参数类型，则 TypeScript 编译器将引发错误。

要解决此问题，可以使用带问号（?）的可选参数。 在下面的示例中，message被标记为可选参数。

let showMyName = function(name:string, message?:string):string {
    if (message) {
        return `Hi! ${name} ${message}`
    } else {
        return `Hi! ${name}`
    }
}
showMyName();  //Error
showMyName('Lokesh');  //Hi! Lokesh
showMyName('Lokesh', 'How are you?'); //Hi! Lokesh How are you?

❗️注意：可选参数必须始终位于函数的参数列表中的必需参数之后。

默认参数

可选参数是一个很棒的功能，但让我们有逻辑去实现其值可以为undefined的方案。 它需要很多null检查和if-else块。

更好的方法是使这些参数具有默认值，而不是将它们声明为可选值。 如果这样做将导致更简洁的代码和易于维护的代码。

let showMyName = function(name:string, message:string='How are you'):string {
    return `Hi ${name} ${message}`
}

showMyName('Lokesh')    //Hi Lokesh How are you
showMyName('Lokesh', 'How are you buddy?') //Hi Lokesh How are you buddy?

❗️注意：

1. 请注意，与可选参数一样，默认参数也必须位于函数参数列表中的必需参数之后。
2. 一个参数不能即是可选参数又是默认参数。 只允许其中的一种类型。

剩余参数

❓疑问: 有时，您可能希望创建可以具有不确定数量参数的函数。 对于一个或两个参数，可以使用可选参数或默认参数。 但是，如果参数数量未知，或者在运行时可能有所不同，该怎么办？。

例如您正在读取输入字段值，并且该值可能会因动态 UI 而有所不同。 此处剩余参数将为您提供帮助。 剩余参数语法使我们可以将不确定数量的参数表示为数组。

1.  要创建剩余参数，请在变量名称前使用省略号，即三个点（'...'）。
2. 剩余参数必须为数组类型，否则我们将收到编译错误。
3. 从理论上讲，对最大参数个数没有具体限制。

let addInputValues = function(...values:number[]):number {
    let result = 0
    for (let val of values) {
        result += val
    }
    return result
}

addInputValues()                //OK 
addInputValues(1,2)             //OK 
addInputValues(1,2,3)           //OK 
addInputValues(1,2,3,4)         //OK 
addInputValues(1,2,3,4,5)       //OK 
addInputValues(1,2,3,4,5,6)     //OK