TypeScript教程

TypeScript - 函数

← 上一节 下一节 →

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

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

Sr.NoFuntions&说明
1.定义函数

函数定义指定特定任务的执行内容和方式.

2.调用函数

必须调用一个函数才能执行它.

3.返回功能

函数也可以将值与控件一起返回给调用者.

4.参数化功能

参数是一种将值传递给函数的机制.

可选参数

当函数执行时无需强制传递参数时，可以使用可选参数.通过在其名称后附加问号，可以将参数标记为可选.可选参数应设置为函数中的最后一个参数.声明带有可选参数的函数的语法如下所示 :

 
 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是一个可选参数.

  • 如果在函数调用期间未传递可选参数值，则参数的值为设置为未定义.

  • 仅当参数传递了值时，该函数才会打印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

Rest参数

Rest参数类似于Java中的变量参数. Rest参数不限制可以传递给函数的值的数量.但是，传递的值必须都是相同的类型.换句话说，rest参数充当相同类型的多个参数的占位符.

要声明rest参数，参数名称前缀为三个句点.任何nonrest参数应该在rest参数之前.

示例:Rest参数

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()声明，接受rest参数 NUMS 的.必须将rest参数的数据类型设置为数组.此外，函数最多只能有一个rest参数.

  • 通过分别传递三个和六个值来调用函数两次.

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

上述代码的输出如下 :

 
数字之和6 
数字之和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 的.该函数有两个参数 - 价格和汇率.

  • 参数 rate 的值设置为 0.50 默认情况下.

  • 程序调用该函数，仅传递参数价格的值.这里， 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){
返回a * b; 
}; 
 console.log(res(12,2))

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

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

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

上述代码的输出如下 :

 
 24

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

函数表达式和函数声明不是同义词.与函数表达式不同，函数声明由函数名绑定.

两者之间的根本区别在于，函数声明在执行之前被解析.另一方面，仅当脚本引擎在执行期间遇到函数表达式时才解析函数表达式.

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

函数构造函数

TypeScript还支持使用函数定义函数内置的JavaScript构造函数，名为Function().

语法

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

示例

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

  • 参数 : 函数可以选择性地具有参数

  • 胖箭头符号/lambda符号(=>) : 它也被称为转向运营商

  • 声明 : 表示函数的指令集

提示 : 按照惯例，鼓励使用单字母参数来进行紧凑而精确的函数声明.

Lambda表达式

这是一个匿名函数表达式，指向一行代码.其语法如下 :

 
([param1，parma2，... param n])=> statement;

示例:Lambda表达式

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

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

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

 
//由typescript生成1.8.10 
 var foo = function(x){return 10 + x; }; 
 console.log(foo(100));//输出110

以下是上述代码的输出 :

 
 110

Lambda语句

Lambda语句是一个匿名函数声明，指向一段代码.当函数体跨越多行时使用此语法.其语法如下 :

 
([param1，parma2，... param n])=> {
//代码块
}

示例:Lambda语句

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

函数的引用被返回并存储在变量 foo 中.

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

 
//由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 +"是一个字符串")
} 
} 
 func(12)
 func("Tom")

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

 
//由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 +"是一个字符串"); 
} 
}; 
 func(12); 
 func("汤姆");

其输出如下 :

 
 12是数字
 Tom是一个字符串

单个参数的可选括号

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("调用函数"); 
} 
 disp();

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

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

其输出如下 :

 
函数调用

函数重载

函数可以根据提供的输入以不同的方式运行.换句话说，程序可以有多个具有相同名称且具有不同实现的方法.该机制称为函数重载. TypeScript提供对函数重载的支持.

要在TypeScript中重载函数，您需要按照下面给出的步骤 :

步骤1 : 声明具有相同名称但功能签名不同的多个函数.功能签名包括以下内容.

  • 参数的数据类型

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

  • 参数数量

Function invoked

  • 参数序列

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

注意 : 函数签名不包括函数的返回类型.

第2步 : 声明必须后跟函数定义.如果参数类型在过载期间不同，则参数类型应设置为任何.此外，对于上面解释的案例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");

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

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

    • 分别接受两个类型为数字和字符串的值的函数.

  • 第三行定义了函数.参数的数据类型设置为任何.此外，第二个参数在这里是可选的.

  • 重载函数由最后两个语句调用.

在编译时，它将生成以下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
← 上一节 下一节 →

相关菜鸟教程