TypeScript 函数

函数是可读性强、可维护和可重用的代码的构建块。函数是一组语句，用于执行特定任务。函数将程序组织成逻辑代码块。一旦定义，可以调用函数来访问代码。这使得代码可重复使用。此外，函数使得程序代码易读并易于维护。

函数声明告诉编译器有关函数的名称、返回类型和参数。函数定义提供实际的函数主体。

可选参数

可选参数可以在函数执行时不强制传递参数。可以通过在参数名后添加一个问号来将参数标记为可选参数。可选参数应该作为函数的最后一个参数设置。声明带有可选参数的函数的语法如下所示−

function function_name (param1[:type], param2[:type], param3[:type])

示例：可选参数

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 

   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");

• 以上示例声明了一个带有参数的函数。在这里，第三个参数mail_id是一个可选参数。

• 如果在函数调用时未传递可选参数的值，则该参数的值将被设置为undefined。

• 只有当传递了参数值时，函数才会打印出mail_id的值。

编译后，将生成以下的 JavaScript 代码：

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);

   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");

上面的代码将产生以下输出：

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id mary@xyz.com

剩余参数

剩余参数与Java中的可变参数类似。剩余参数不限制您可以传递给函数的值的数量。然而，传递的值必须全部是相同类型的。换句话说，剩余参数充当了相同类型的多个参数的占位符。

要声明剩余参数，参数名前要加上三个点。任何非剩余参数应该在剩余参数之前。

示例：剩余参数

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 

   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

• 函数addNumbers()的声明接受一个名为nums的剩余参数。剩余参数的数据类型必须设置为数组。此外，一个函数最多只能有一个剩余参数。

• 该函数被调用两次，分别传递三个和六个值。

• for循环遍历传递给函数的参数列表，并计算它们的总和。

编译后，将生成以下JavaScript代码：

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
    var i;
   var sum = 0;

   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

上述代码的输出如下所示-

sum of numbers 6 
sum of numbers 50

默认参数

函数参数也可以通过默认值进行赋值。然而，这样的参数也可以显式地传递值。

语法

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意 − 参数不能同时被声明为可选和默认值。

示例：默认参数

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

在编译过程中，它将生成以下JavaScript代码 –

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

它的输出如下:

Discount amount : 500 
Discount amount : 300

• 该示例声明了函数calculate_discount。该函数有两个参数 – price和rate。

• 参数rate的值默认设置为0.50。

• 程序调用该函数，仅传递参数price的值。这里，参数rate的值为0.50（默认值）。

• 相同的函数被调用，但使用了两个参数。参数rate的默认值被覆盖，并设置为显式传递的值。

匿名函数

没有绑定到标识符（函数名）的函数称为 匿名函数 。这些函数在运行时动态声明。匿名函数可以接受输入并返回输出，就像标准函数一样。匿名函数通常在创建后无法访问。

变量可以被赋值为一个匿名函数。这样的表达式被称为函数表达式。

语法

var res = function( [arguments] ) { ... }

示例-一个简单的匿名函数

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

编译后，它会生成相同的JavaScript代码。

它将产生以下输出 –

hello world

示例 ─ 带参数的匿名函数

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

匿名函数返回传递给它的值的乘积。

在编译时，它将生成以下JavaScript代码：

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

上述代码的输出如下 –

24

函数表达式和函数声明 – 它们是同义词吗

函数表达式和函数声明并不是同义词。与函数表达式不同的是，函数声明会被函数名称绑定。

两者之间的根本区别在于，函数声明在执行之前被解析，而函数表达式只有在脚本引擎在执行过程中遇到它时才会被解析。

当JavaScript解析器在主代码流中看到一个函数时，它会假设它是函数声明。当一个函数作为语句的一部分出现时，它是一个函数表达式。

函数构造器

TypeScript还支持使用内置的JavaScript构造函数 Function() 来定义函数。

语法

var res = new Function( [arguments] ) { ... }.

示例

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

新Function()是对构造函数的调用，该构造函数创建并返回一个函数引用。

在编译过程中，它将生成相同的JavaScript代码。

上述示例代码的输出如下所示−

12

递归和TypeScript函数

递归是一种通过将函数重复调用自身来迭代执行操作的技术，直到达到结果。递归最适用于需要在循环内部以不同参数重复调用相同函数的情况。

示例 – 递归

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

在编译时，它将生成相同的JavaScript代码。

以下是它的输出：

720

示例：匿名递归函数

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

在编译时，它将生成相同的JavaScript代码。

其输出结果如下：

Hello!!

Lambda函数

Lambda在编程中指的是匿名函数。Lambda函数是一种简洁的表示匿名函数的机制。这些函数也被称为 箭头函数。

Lambda函数的结构

一个Lambda函数包含三个部分：

• 参数 - 函数可以选择包含参数。

• 短箭头符号/lambda符号 (= >) - 也被称为”指向”运算符。

• 语句 - 表示函数的指令集。

提示 - 按照惯例，建议使用单个字母作为参数，以获得更紧凑和准确的函数声明。

Lambda表达式

Lambda表达式是一个指向单行代码的匿名函数表达。它的语法如下：

( [param1, parma2,…param n] )=>statement;

示例：Lambda表达式

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

程序声明了一个lambda表达式函数。该函数返回10和传递的参数的和。

在编译时，将生成以下JavaScript代码。

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

这是以上代码的输出结果 –

110

Lambda语句

Lambda语句是一个指向一段代码块的匿名函数声明。当函数体包含多行时，使用此语法。其语法如下：

( [param1, parma2,…param n] )=> {

   //code block
}

示例：Lambda语句

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

将函数的引用返回并存储在变量中 foo 。

编译后，将生成以下JavaScript代码−

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

以上程序的输出结果如下：

110

语法变化

参数类型推断

在参数上不必指定数据类型。如果不指定数据类型，则参数的数据类型为任意类型。让我们来看以下代码片段：

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

编译后，它将生成以下的JavaScript代码：

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

它的输出如下 –

12 is numeric 
Tom is a string

对于单个参数，括号是可选的

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

在编译时，它将生成以下JavaScript代码：

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

它的输出如下：

The function got 12

对于单个语句，可选择使用大括号，对于无参数，使用空括号

下面的示例展示了这两种语法变体。

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

在编译时，它将生成以下JavaScript代码：

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

它的输出如下：

Function invoked

函数重载

函数有能力根据提供的输入以不同的方式进行操作。换句话说，程序可以有多个同名但实现不同的方法。这种机制被称为函数重载。TypeScript提供了对函数重载的支持。

要在TypeScript中进行函数重载，您需要按照以下步骤进行：

步骤1 —声明多个同名但具有不同函数签名的函数。函数签名包括以下内容：

• 参数的数据类型

function disp(string):void; 
function disp(number):void;

• 参数数量

function disp(n1:number):void; 
function disp(x:number,y:number):void;

• 参数的顺序

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

注意 - 函数签名不包括函数的返回类型。

步骤2 - 声明后必须跟上函数定义。如果参数类型在重载过程中发生变化，则参数类型应设置为 any 。另外，对于上面解释的 情况b ，您可以考虑在函数定义过程中将一个或多个参数标记为可选。

步骤3 - 最后，您必须调用函数使其可用。

示例

现在让我们来看一下以下示例代码 –

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

• 前两行描述了函数的过载声明。该函数有两个重载形式：
  • 接受一个字符串参数的函数。

  • 分别接受两个 number 类型和字符串类型的值作为参数的函数。

• 第三行定义了函数。参数的数据类型被设置为 any 。此外，这里的第二个参数是可选的。

• 最后两个语句调用了重载的函数。

编译后，将生成以下 JavaScript 代码：

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

上述代码将产生以下输出 −

abc 
1 
xyz