📌  相关文章
📜  TypeScript函数

📅  最后修改于: 2021-01-11 12:41:33             🧑  作者: Mango

TypeScript函数

函数是JavaScript中任何应用程序的基本构建块。它使代码可读，可维护和可重用。我们可以使用它来构建抽象层，模仿类，信息隐藏和模块。但是，在TypeScript中，我们具有类，名称空间和模块的概念，但是函数仍然是描述操作方式的组成部分。 TypeScript还允许在标准JavaScript函数中添加新功能，以使代码更易于使用。

函数优势

这些是功能的主要优点。

  • 代码可重用性：我们可以多次调用一个函数，而无需再次编写相同的代码块。代码的可重用性节省了时间并减小了程序大小。
  • 更少的编码：功能使我们的程序紧凑。因此，我们不需要每次都写很多代码来执行一项常见任务。
  • 易于调试：它使程序员易于定位和隔离错误信息。

功能方面

函数有三个方面。

  • 函数声明：函数声明告诉编译器函数名称，函数参数和返回类型。函数声明的语法为：
function functionName( [arg1, arg2, ...argN] );
  • 函数定义：它包含将要执行的实际语句。它指定了什么以及如何完成特定任务。函数定义的语法为：
function functionName( [arg1, arg2, ...argN] ){  
         //code to be executed  
}
  • 函数调用：我们可以从程序中的任何位置调用函数。参数/参数在函数调用和函数声明中不能有所不同。我们必须传递与函数声明中声明的函数数量相同的函数。函数调用的语法为：
FunctionName();

功能创造

我们可以通过两种方式创建函数。这些是：

  • 命名函数
  • 匿名函数

命名函数

当我们通过给定名称声明和调用函数，这种类型的函数称为命名函数。

句法

functionName( [arguments] ) { }

例

//Function Definition
function display() {
    console.log("Hello JavaTpoint!");
}
//Function Call
display();

输出：

匿名函数

没有名称的函数称为匿名函数。这些类型的函数在运行时动态声明。它被定义为一个表达式。我们可以将其存储在变量中，因此它不需要函数名称。像标准函数一样，它也接受输入并返回输出。我们可以使用包含函数的变量名来调用它。

句法

let res = function( [arguments] ) { }

例

// Anonymous function
let myAdd = function (x: number, y: number) : number {
    return x + y;
};
// Anonymous function call
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!"

输出：

休息参数

rest参数用于将零个或多个值传递给函数。我们可以通过在参数之前添加三个“点”字符('…')来声明它。它允许函数不使用arguments对象而具有不同数量的参数。 TypeScript编译器将使用rest参数创建一个参数数组，以便所有数组方法都可以使用rest参数。在参数数量不确定的情况下，rest参数很有用。

其余参数遵循的规则：

  • 函数仅允许一个rest参数。
  • 它必须是数组类型。
  • 它必须是参数列表中的最后一个参数。

句法

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);

输出：