TypeScript函数
函数是JavaScript应用程序的基本构建块。它使代码具有可读性、可维护性和可重用性。我们可以使用它来构建抽象层,模拟类、信息隐藏和模块。然而,在TypeScript中,我们有类、命名空间和模块的概念,但函数仍然是描述如何做事情的一个重要组成部分。TypeScript还允许向标准JavaScript函数添加新功能,以使代码更易于工作。
函数的优点
以下是函数的主要优点。
- 代码可重用性:我们可以多次调用一个函数,而不必再次编写相同的代码块。代码可重用性节省时间并减小程序大小。
- 编码量少:函数使我们的程序紧凑。因此,我们每次执行常见任务时都不需要编写很多行代码。
- 易于调试:它使程序员容易定位和隔离错误信息。
函数方面
函数有三个方面。
- 函数声明:函数声明告诉编译器函数名称、函数参数和返回类型。函数声明的语法是:
function functionName( [arg1, arg2, ...argN] );
- 函数定义:它包含实际要执行的语句。它指定了特定任务将如何完成以及如何完成。函数定义的语法为:
function functionName( [arg1, arg2, ...argN] ){
//要执行的代码
}
- 函数调用:我们可以从程序中的任何位置调用函数。参数/参数在函数调用和函数声明中不能有所不同。我们必须传递与在函数声明中声明的相同数量的函数。函数调用的语法是:
FunctionName();
函数创建
我们可以通过两种方式创建函数。它们是:
- 命名函数
- 匿名函数
命名函数
当我们按其给定名称声明和调用函数时,这种类型的函数称为命名函数。
语法
functionName( [arguments] ) { }
示例
//Function Definition
function display() {
console.log("Hello JavaTpoint!");
}
//Function Call
display();
输出:
匿名函数
没有名称的函数称为匿名函数。这些函数类型是在运行时动态声明的,它被定义为表达式。我们可以将其存储在变量中,因此不需要函数名称。与标准函数一样,它也接受输入并返回输出。我们可以使用包含函数的变量名称来调用它。
语法
let res = function( [arguments] ) { }
示例
// 匿名函数
let myAdd = function (x: number, y: number) : number {
return x + y;
};
// 调用匿名函数
console.log(myAdd(5,3));
输出结果:
函数参数
参数是传递给函数的值或参数。在TypeScript中,编译器接受与在函数签名中定义的相同数量和类型的参数。如果编译器与函数签名中不同的参数匹配,则会出现编译错误。
函数参数可以分为以下类别:
- 可选参数
- 默认参数
- 剩余参数
可选参数
在JavaScript中,我们可以调用一个没有传递任何参数的函数。因此,在JavaScript函数中,参数是可选的,当我们这样做时,每个参数值都是未定义的。
与JavaScript不同,如果我们尝试调用一个函数而没有提供与其函数签名中声明的参数数量和类型完全相同的参数,则TypeScript编译器将引发错误。为了解决这个问题,我们可以使用可选参数,通过使用问号符(“?”)来标记可能或可能不会接收值的参数。在下面的示例中,e_mail_id 被标记为可选参数。
语法
function function_name(parameter1[:type], parameter2[:type], parameter3 ? [:type]) { }
示例
function showDetails(id:number,name:string,e_mail_id?:string) {
console.log("ID:", id, " Name:",name);
if(e_mail_id!=undefined)
console.log("Email-Id:",e_mail_id);
}
showDetails(101,"Virat Kohli");
showDetails(105,"Sachin","sachin@javatpoint.com");
输出结果:
默认参数
TypeScript提供了一种将默认值设置为函数参数的选项。如果用户没有向参数传递值,则TypeScript会初始化参数的默认值。默认参数的行为与可选参数相同。对于默认参数,如果在函数调用中未传递值,则默认参数必须跟随函数签名中的所需参数。但是,如果函数签名在必需参数之前具有默认参数,则仍然可以调用将默认参数标记为传递的未定义值的函数。
注意:我们不能同时将参数设置为可选和默认状态。
语法
function function_name(parameter1[:type], parameter2[:type] = default_value) { }
示例
function displayName(name: string, greeting: string = "Hello") : string {
return greeting + ' ' + name + '!';
}
console.log(displayName('JavaTpoint')); //Returns "Hello JavaTpoint!"
console.log(displayName('JavaTpoint', 'Hi')); //Returns "Hi JavaTpoint!".
console.log(displayName('Sachin')); //Returns "Hello Sachin!"
输出:
剩余参数
剩余参数用于向函数传递零个或多个值。我们可以在参数前面加上三个 “点”字符 (‘…’) 来声明它。它允许函数具有不同数量的参数,而不使用 arguments 对象。TypeScript 编译器将使用剩余参数创建一个参数数组,以便所有数组方法都可以使用剩余参数。当我们有未确定数量的参数时,剩余参数非常有用。
剩余参数须遵守以下规则:
- 函数中只允许一个剩余参数。
- 它必须是数组类型。
- 它必须是参数列表中的最后一个参数。
语法
function function_name(parameter1[:type], parameter2[:type], ...parameter[:type]) { }
示例
function sum(a: number, ...b: number[]): number {
let result = a;
for (var i = 0; i < b.length; i++) {
result += b[i];
}
return result;
}
let result1 = sum(3, 5);
let result2 = sum(3, 5, 7, 9);
console.log(result1 +"\n" + result2);
输出: