TypeScript - ฟังก์ชั่น

ฟังก์ชันเป็นส่วนประกอบของรหัสที่อ่านได้บำรุงรักษาและใช้ซ้ำได้ ฟังก์ชันคือชุดของคำสั่งเพื่อดำเนินงานเฉพาะ ฟังก์ชั่นจัดระเบียบโปรแกรมเป็นบล็อกตรรกะของโค้ด เมื่อกำหนดแล้วฟังก์ชันอาจถูกเรียกใช้เพื่อเข้าถึงรหัส สิ่งนี้ทำให้โค้ดสามารถใช้ซ้ำได้ ยิ่งไปกว่านั้นฟังก์ชั่นช่วยให้อ่านและบำรุงรักษาโค้ดของโปรแกรมได้ง่าย

การประกาศฟังก์ชันจะบอกคอมไพลเลอร์เกี่ยวกับชื่อของฟังก์ชันประเภทการส่งคืนและพารามิเตอร์ นิยามของฟังก์ชันระบุเนื้อความที่แท้จริงของฟังก์ชัน

ซีเนียร์ No	Funtions & Description
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","[email protected]");

• ตัวอย่างข้างต้นประกาศฟังก์ชันที่กำหนดพารามิเตอร์ ที่นี่พารามิเตอร์ที่สามคือ 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", "[email protected]");

โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -

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

พารามิเตอร์ที่เหลือ

พารามิเตอร์ Rest จะคล้ายกับอาร์กิวเมนต์ตัวแปรใน Java พารามิเตอร์ส่วนที่เหลือไม่ได้ จำกัด จำนวนค่าที่คุณสามารถส่งผ่านไปยังฟังก์ชันได้ อย่างไรก็ตามค่าที่ส่งผ่านต้องเป็นประเภทเดียวกันทั้งหมด กล่าวอีกนัยหนึ่งพารามิเตอร์ rest ทำหน้าที่เป็นตัวยึดตำแหน่งสำหรับอาร์กิวเมนต์ประเภทเดียวกันหลายตัว

ในการประกาศพารามิเตอร์ที่เหลือชื่อพารามิเตอร์จะขึ้นต้นด้วยจุดสามจุด พารามิเตอร์ nonrest ใด ๆ ควรมาก่อนพารามิเตอร์ที่เหลือ

ตัวอย่าง: Rest Parameters

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 ต้องตั้งค่าชนิดข้อมูลของพารามิเตอร์ที่เหลือเป็นอาร์เรย์ ยิ่งไปกว่านั้นฟังก์ชันสามารถมีพารามิเตอร์ rest ได้สูงสุดหนึ่งพารามิเตอร์

• ฟังก์ชันนี้ถูกเรียกใช้สองครั้งโดยส่งผ่านค่าสามและหกค่าตามลำดับ

• สำหรับลูปวนซ้ำผ่านรายการอาร์กิวเมนต์ส่งผ่านไปยังฟังก์ชันและคำนวณผลรวม

ในการคอมไพล์จะสร้างโค้ด 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) { 
}

Note - ไม่สามารถประกาศพารามิเตอร์เป็นทางเลือกและค่าเริ่มต้นในเวลาเดียวกันได้

ตัวอย่าง: พารามิเตอร์เริ่มต้น

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 ฟังก์ชั่นมีสองพารามิเตอร์ - ราคาและอัตรา

• ค่าของอัตราพารามิเตอร์ถูกตั้งค่าเป็น0.50โดยค่าเริ่มต้น

• โปรแกรมเรียกใช้ฟังก์ชันโดยส่งผ่านไปยังค่าของราคาพารามิเตอร์เท่านั้น ที่นี่ค่าของอัตราคือ0.50 (ค่าเริ่มต้น)

• มีการเรียกใช้ฟังก์ชันเดียวกัน แต่มีสองอาร์กิวเมนต์ ค่าเริ่มต้นของอัตราจะถูกเขียนทับและตั้งค่าเป็นค่าที่ส่งผ่านอย่างชัดเจน

ฟังก์ชันนิรนาม

ฟังก์ชันที่ไม่ผูกมัดกับตัวระบุ (ชื่อฟังก์ชัน) เรียกว่าเป็น anonymous functions. ฟังก์ชันเหล่านี้ประกาศแบบไดนามิกที่รันไทม์ ฟังก์ชันที่ไม่ระบุชื่อสามารถรับอินพุตและเอาต์พุตส่งคืนได้เช่นเดียวกับฟังก์ชันมาตรฐาน โดยปกติแล้วฟังก์ชันที่ไม่ระบุชื่อจะไม่สามารถเข้าถึงได้หลังจากการสร้างครั้งแรก

ตัวแปรสามารถกำหนดฟังก์ชันแบบไม่ระบุตัวตนได้ นิพจน์ดังกล่าวเรียกว่านิพจน์ฟังก์ชัน

ไวยากรณ์

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

ตัวอย่าง─ฟังก์ชัน Anonymous อย่างง่าย

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

Function Expression และ Function Declaration ─ตรงกันหรือไม่?

การแสดงออกของฟังก์ชันและการประกาศฟังก์ชันไม่ตรงกัน ต่างจากนิพจน์ฟังก์ชันการประกาศฟังก์ชันจะถูกผูกไว้กับชื่อฟังก์ชัน

ความแตกต่างพื้นฐานระหว่างทั้งสองคือการประกาศฟังก์ชันจะถูกแยกวิเคราะห์ก่อนการดำเนินการ ในทางกลับกันนิพจน์ฟังก์ชันจะถูกแยกวิเคราะห์เฉพาะเมื่อสคริปต์เอ็นจินพบระหว่างการดำเนินการ

เมื่อตัวแยกวิเคราะห์ 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);

ฟังก์ชันใหม่ () เป็นการเรียกตัวสร้างซึ่งจะสร้างและส่งกลับการอ้างอิงฟังก์ชัน

ในการคอมไพล์จะสร้างโค้ดเดียวกันใน 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

แลมด้าหมายถึงฟังก์ชันที่ไม่ระบุชื่อในการเขียนโปรแกรม ฟังก์ชันแลมบ์ดาเป็นกลไกที่กระชับเพื่อแสดงฟังก์ชันที่ไม่ระบุตัวตน ฟังก์ชันเหล่านี้เรียกอีกอย่างว่าArrow functions.

ฟังก์ชันแลมด้า - กายวิภาคศาสตร์

ฟังก์ชัน Lambda มี 3 ส่วน -

• Parameters - ฟังก์ชันอาจมีพารามิเตอร์ก็ได้

• The fat arrow notation/lambda notation (=>) - เรียกอีกอย่างว่าเป็นไปที่ตัวดำเนินการ

• Statements - แสดงชุดคำสั่งของฟังก์ชัน

Tip - ตามแบบแผนสนับสนุนให้ใช้พารามิเตอร์อักษรตัวเดียวเพื่อการประกาศฟังก์ชันที่กะทัดรัดและแม่นยำ

แลมบ์ดานิพจน์

เป็นนิพจน์ฟังก์ชันที่ไม่ระบุชื่อที่ชี้ไปที่โค้ดบรรทัดเดียว ไวยากรณ์มีดังนี้ -

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

ตัวอย่าง: Lambda Expression

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

โปรแกรมประกาศฟังก์ชันแลมบ์ดานิพจน์ ฟังก์ชันจะส่งคืนผลรวมของ 10 และอาร์กิวเมนต์ส่งผ่าน

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้

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

นี่คือผลลัพธ์ของรหัสด้านบน -

110

แลมด้าแถลงการณ์

คำสั่ง 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

ฟังก์ชันโอเวอร์โหลด

ฟังก์ชันมีความสามารถในการทำงานที่แตกต่างกันไปตามข้อมูลที่ป้อนเข้ามา กล่าวอีกนัยหนึ่งโปรแกรมสามารถมีหลายวิธีที่มีชื่อเดียวกันโดยมีการใช้งานที่แตกต่างกัน กลไกนี้เรียกว่า Function Overloading TypeScript ให้การสนับสนุนสำหรับการทำงานมากเกินไป

ในการโอเวอร์โหลดฟังก์ชันใน TypeScript คุณต้องทำตามขั้นตอนที่ระบุด้านล่าง -

Step 1- ประกาศหลายฟังก์ชันด้วยชื่อเดียวกัน แต่ลายเซ็นฟังก์ชันต่างกัน ลายเซ็นของฟังก์ชันมีดังต่อไปนี้

• The data type of the parameter

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

• The number of parameters

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

• The sequence of parameters

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

Note - ลายเซ็นของฟังก์ชันไม่รวมประเภทการส่งคืนของฟังก์ชัน

Step 2- การประกาศจะต้องตามด้วยนิยามฟังก์ชัน ควรตั้งค่าประเภทพารามิเตอร์เป็นanyหากประเภทพารามิเตอร์แตกต่างกันระหว่างการโอเวอร์โหลด นอกจากนี้สำหรับcase b อธิบายไว้ข้างต้นคุณอาจพิจารณาทำเครื่องหมายพารามิเตอร์อย่างน้อยหนึ่งพารามิเตอร์เป็นทางเลือกในระหว่างการกำหนดฟังก์ชัน

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

• สองบรรทัดแรกแสดงถึงการประกาศฟังก์ชันโอเวอร์โหลด ฟังก์ชั่นมีสองโอเวอร์โหลด -

  • ฟังก์ชันที่ยอมรับพารามิเตอร์สตริงเดียว

  • ฟังก์ชันที่ยอมรับสองค่าของ type 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