TypeScript函数使用详解 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript属性访问器

函数是JavaScript中任何应用程序的基本构件。它使代码可读、可维护和可重用。我们可以使用它来构建抽象层、模拟类、信息隐藏和模块。然而，在TypeScript中，我们有类、名称空间和模块的概念，但是函数仍然是描述如何做事情的重要部分。TypeScript还允许向标准JavaScript函数添加新功能，使代码更容易工作。

函数的优点

这些是函数的主要优点。

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

函数的组成元素

一个函数组成有三个元素。

函数声明：函数声明告诉编译器函数名、函数参数和返回类型。函数声明的语法是:

function functionName( [arg1, arg2, ...argN] );  

函数定义：它包含将要执行的实际语句，它指定了具体任务的内容和方式。函数定义的语法为:

function functionName( [arg1, arg2, ...argN] ){    
         //code    
}    

函数调用：我们可以在程序的任何地方调用函数。参数/参数不能在函数调用和函数声明上有所不同，我们必须传递与在函数声明中声明的相同数量的函数。函数调用的语法为:

FunctionName(); 

函数创建

我们可以用两种方法创建一个函数。这些是:

• 命名函数
• 匿名函数

命名函数

当我们根据一个函数的给定名称来声明和调用它时，这种类型的函数称为命名函数。

语法

functionName( [arguments] ) { }  

例子

//函数定义
function display() {  
    console.log("Hello srcmini02.com!");  
}  
// 函数调用
display();  

匿名函数

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

语法

let res = function( [arguments] ) { }  

例子

// 匿名函数
let myAdd = function (x: number, y: number) : number {  
    return x + y;  
};  
// 匿名函数调用
console.log(myAdd(5,3));  

函数参数

参数是传递给函数的值或参数，在TypeScript中，编译器接受与函数签名中定义的相同数量和类型的参数。如果编译器与函数签名中的参数不匹配，则会给出编译错误。

函数参数可以分为以下类别:

• 可选参数
• 默认参数
• rest参数

可选参数

在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,"La Oreja");  
showDetails(105,"Van","van@srcmini02.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('srcmini'));   // "Hello srcmini!"  
console.log(displayName('srcmini', 'Hi'));   // "Hi srcmini!".  
console.log(displayName('Oreja'));    // "Hello Oreja!"  

rest参数

rest参数用于向函数传递零个或多个值。我们可以通过在参数前加上三个“点”字符(‘…’)来声明它。它允许函数在不使用arguments对象的情况下拥有不同数量的参数。TypeScript编译器将使用rest参数创建一个参数数组，这样所有的数组方法都可以使用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);