TypeScript 函數

函數是可讀，可維護和可重用代碼的構建塊。函數是一組用于執(zhí)行特定任務的語句。函數將程序組織成邏輯代碼塊。一旦定義，就可以調用函數來訪問代碼。這使得代碼可以重用。此外，函數可以輕松讀取和維護程序的代碼。

函數聲明告訴編譯器函數的名稱，返回類型和參數。函數定義提供了函數的實際主體。

1、定義函數

function  function_name() { 
   // function body 
}

function () {   
   //function definition 
   console.log("function called") 
}

Function_name()

function test() {   // function definition    
   console.log("function called") 
} 
test()              // function invocation

function test() { 
   console.log("function called"); 
} 
test();    // function invocation

function called

3、返回函數

function function_name():return_type { 
   //statements 
   return value; 
}

//function defined 
function greet():string { //the function returns a string 
   return "Hello World" 
} 

function caller() { 
   var msg = greet() //function greet() invoked 
   console.log(msg) 
} 

//invoke function 
caller()

//Generated by typescript 1.8.10
//function defined
function greet() {
   return "Hello World";
}
function caller() {
   var msg = greet(); //function greet() invoked
   console.log(msg);
}
//invoke function
caller();

Hello World

4、參數化函數

function func_name( param1 [:datatype], ( param2 [:datatype]) {   
}

function test_param(n1:number,s1:string) { 
   console.log(n1) 
   console.log(s1) 
} 
test_param(123,"this is a string")

//Generated by typescript 1.8.10
function test_param(n1, s1) {
   console.log(n1);
   console.log(s1);
}
test_param(123, "this is a string");

123 
this is a string

可選參數

當函數的執(zhí)行不需要強制傳遞參數時，可以使用可選參數。通過在其名稱后附加問號，可以將參數標記為可選?？蛇x參數應設置為函數的最后一個參數。使用可選參數聲明函數的語法如下所示：

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

rest參數

rest參數類似于Java的變量參數。rest參數不限制可以傳遞給函數的值的數目。但是，傳遞的值必須都是相同的類型。換句話說，rest參數充當相同類型的多個參數的占位符。

要聲明一個rest參數，參數名稱前綴為三個句點。任何nonrest參數都應該在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循環(huán)遍歷參數列表，傳遞給函數并計算它們的總和。

在編譯時，它會生成以下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的默認值，并將其設置為顯式傳遞的值。

匿名函數

未綁定到標識符（函數名）的函數稱為匿名函數。這些函數在運行時動態(tài)聲明。匿名函數可以接受輸入和返回輸出，就像標準函數一樣。匿名函數在初始創(chuàng)建后通常無法訪問。

可以為變量分配匿名函數。 這種表達式稱為函數表達式。

語法

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

函數表達式和函數聲明是同義詞嗎？

函數表達式和函數聲明不是同義詞。與函數表達式不同，函數聲明由函數名綁定。

兩者的根本區(qū)別在于，函數聲明在執(zhí)行之前被解析。另一方面，僅在腳本引擎在執(zhí)行期間遇到函數表達式時才解析函數表達式。

當JavaScript解析器在主代碼流中看到一個函數時，它會假定函數聲明。當函數作為語句的一部分出現時，它是一個函數表達式。

Function構造函數

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

新的Function()是對構造函數的調用，而構造函數又創(chuàng)建并返回函數引用。

在編譯時，它會在JavaScript中生成相同的代碼。

上述例子代碼的輸出如下：

12 

遞歸和TypeScript函數

遞歸是一種通過對函數自身重復調用直到它到達結果來迭代操作的技術。當您需要使用循環(huán)內的不同參數重復調用相同的函數時，最好應用遞歸。

示例：遞歸

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函數是表示匿名函數的一個簡潔的機制。這些函數也被稱為Arrow函數。

Lambda函數 - 解析

Lambda函數有3個部分：

• 參數 - 一個函數可以選擇性的帶有參數

• 箭頭符號/lambda符號（=>） - 它也被稱為作為轉到運算符

• 聲明 - 表示函數的指令集

提示 - 按照慣例，鼓勵使用單字母參數進行緊湊而精確的函數聲明。

Lambda表達式

它是一個匿名函數表達式，指向一行代碼。它的語法如下：

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

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
}

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 。此外， 如上所述的第二種情況，你可以考慮在函數定義期間將一個或多個參數標記為可選。

第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和string的值的函數。

• 第三行定義了函數。參數的數據類型被設置為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