TypeScript - 函数

---

---

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","[email protected]");

• 上面的示例声明了一个参数化函数。这里，第三个参数，即 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", "[email protected]");

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

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

剩余参数

剩余参数类似于 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 也支持使用名为 Function() 的内置 JavaScript 构造器来定义函数。

语法

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

示例

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

new 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 函数有 3 个部分：

• 参数 - 函数可以可选地具有参数

• 胖箭头符号/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

语法变体

参数类型推断

不必指定参数的数据类型。在这种情况下，参数的数据类型为 any。让我们看看以下代码片段：

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

• 前两行描述了函数重载声明。该函数有两个重载：

  • 接受单个字符串参数的函数。

  • 一个函数，分别接收两个类型为数字和字符串的值。

• 第三行定义了函数。参数的数据类型设置为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