ฟังก์ชันในตัวใน TypeScript

บทความนี้อธิบายฟังก์ชันในตัวใน TypeScript

YouTube Video

ฟังก์ชันในตัวใน TypeScript

ฟังก์ชันในตัวของ TypeScript เป็นฟังก์ชันที่สะดวกสำหรับการดำเนินการทั่วไปในรูปแบบที่กระชับ ฟังก์ชันเหล่านี้เป็นฟังก์ชันมาตรฐานของ JavaScript ที่เพิ่มฟีเจอร์ความปลอดภัยเชิงชนิดข้อมูล ทำให้ใช้งานได้อย่างมีประโยชน์โดยเฉพาะเมื่อพัฒนาโค้ดใน TypeScript ในส่วนนี้ เราจะอธิบายรายละเอียดเกี่ยวกับฟังก์ชันในตัวที่สำคัญ การใช้งาน และการกำหนดชนิดข้อมูล

ฟังก์ชันในตัวคืออะไร?

ฟังก์ชันในตัวของ TypeScript มีพื้นฐานมาจากฟังก์ชันมาตรฐานของ JavaScript โดยเพิ่มระบบชนิดข้อมูลของ TypeScript เพื่อปรับปรุงการตรวจสอบชนิดและการเติมข้อความอัตโนมัติ ฟังก์ชันหลักประกอบไปด้วยดังต่อไปนี้:

• parseInt()
• parseFloat()
• isNaN()
• isFinite()
• Number()
• String()
• Array()
• Array.isArray()
• eval()
• encodeURI()
• decodeURI()
• setTimeout()
• setInterval()

ฟังก์ชันเหล่านี้ถูกใช้กันอย่างแพร่หลายในโครงการ TypeScript สำหรับการแปลงข้อมูลและการประเมินผลอย่างกระชับ

parseInt()

parseInt() เป็นฟังก์ชันที่ใช้ในการแปลงสตริงให้เป็นจำนวนเต็ม คุณสามารถกำหนดฐาน (เช่น ฐานสอง ฐานสิบ) ในอาร์กิวเมนต์ที่สอง ใน TypeScript คุณสามารถกำหนดชนิดข้อมูลตามตัวอย่างดังนี้:

 1function stringToInt(value: string, radix: number = 10): number {
 2    const result: number = parseInt(value, radix);
 3    if (isNaN(result)) {
 4        throw new Error('Invalid number format');
 5    }
 6    return result;
 7}
 8
 9console.log(stringToInt("42")); // 42
10console.log(stringToInt("101010", 2)); // 42 (converted from binary)

• กำหนดว่าข้อมูลนำเข้าเป็นสตริงด้วย value: string
• ค่าที่ส่งคืนถูกกำหนดให้เป็นชนิดข้อมูล number อย่างชัดเจน

parseFloat()

parseFloat() เป็นฟังก์ชันที่ใช้สำหรับแปลงสตริงให้เป็นตัวเลขทศนิยม

 1function stringToFloat(value: string): number {
 2    const result: number = parseFloat(value);
 3    if (isNaN(result)) {
 4        throw new Error('Invalid number format');
 5    }
 6    return result;
 7}
 8
 9console.log(stringToFloat("3.14")); // 3.14
10console.log(stringToFloat("2.71828")); // 2.71828

• parseFloat() สามารถแปลงตัวเลขที่มีจุดทศนิยมได้อย่างถูกต้อง
• โดยการกำหนดชนิดข้อมูล คุณสามารถรับการแจ้งเตือนในระหว่างการตรวจสอบชนิดถ้าข้อมูลนำเข้าไม่ใช่ตัวเลข

isNaN()

isNaN() เป็นฟังก์ชันที่ใช้ในการตรวจสอบว่าค่าที่กำหนดเป็น NaN (ไม่ใช่ตัวเลข) ตัวอย่างการใช้งานใน TypeScript มีดังนี้:

1function checkNaN(value: unknown): boolean {
2    return isNaN(Number(value));
3}
4
5console.log(checkNaN("hello")); // true
6console.log(checkNaN(123)); // false

• ชนิดข้อมูล unknown เป็นชนิดข้อมูลทั่วไปที่สามารถรับค่าของชนิดใดก็ได้
• แปลงค่าให้เป็นตัวเลขโดยใช้ฟังก์ชัน Number() และตรวจสอบว่าผลลัพธ์เป็น NaN หรือไม่

isFinite()

isFinite() ใช้ตรวจสอบว่าค่าเป็นค่าที่มีขอบเขตจำกัดหรือไม่

1function isValueFinite(value: unknown): boolean {
2    return isFinite(Number(value));
3}
4
5console.log(isValueFinite("100")); // true
6console.log(isValueFinite(Infinity)); // false

• ฟังก์ชันนี้ยังใช้ Number() ในการแปลงค่าให้เป็นตัวเลขก่อนการตรวจสอบ

Number()

ฟังก์ชัน Number() ใช้ในการแปลงสตริงหรือค่าบูลีนให้เป็นตัวเลข

1function convertToNumber(value: string | boolean): number {
2    return Number(value);
3}
4
5console.log(convertToNumber("42")); // 42
6console.log(convertToNumber(true)); // 1

• ในตัวอย่างนี้ มีการใช้ union type string | boolean เพื่อระบุว่าอาร์กิวเมนต์จะเป็นได้ทั้ง string หรือ boolean

String()

ฟังก์ชัน String() แปลงตัวเลขหรือค่าประเภท boolean ให้กลายเป็น string

1function convertToString(value: number | boolean): string {
2    return String(value);
3}
4
5console.log(convertToString(123)); // "123"
6console.log(convertToString(false)); // "false"

• ในตัวอย่างนี้ ได้สร้างฟังก์ชันที่ยอมรับ union type number | boolean และแปลงผลลัพธ์ให้เป็น string

Array()

ฟังก์ชัน Array() ใช้สำหรับสร้าง array ใหม่ นอกจากนี้ ยังมีเมธอดที่มีประโยชน์มากมายสำหรับการสร้าง subarray จาก array ที่มีอยู่หรือดึงค่าเฉพาะออกมา

 1function createArray(): Array<number> {
 2    return Array(1, 2, 3, 4, 5); // 新しい配列を作成
 3}
 4
 5function getSubArray(array: Array<number>): Array<number> {
 6    return array.slice(1, 4); // サブ配列を作成
 7}
 8
 9const numbers = createArray();
10console.log(numbers); // [1, 2, 3, 4, 5]
11
12const subArray = getSubArray(numbers);
13console.log(subArray); // [2, 3, 4]

• ตัวอย่างนี้แสดงวิธีการสร้าง array ใหม่โดยใช้ฟังก์ชัน Array() และสร้าง subarray โดยใช้เมธอด slice()

Array.isArray()

Array.isArray() ใช้ตรวจสอบว่าค่าที่กำหนดเป็น array หรือไม่

1function checkArray(value: unknown): boolean {
2    return Array.isArray(value);
3}
4
5console.log(checkArray([1, 2, 3])); // true
6console.log(checkArray("Not an array")); // false

• โดยใช้ unknown type เราสามารถยอมรับค่าทุกประเภทในขณะที่ตรวจสอบว่าค่านั้นเป็น array หรือไม่

eval()

ฟังก์ชัน eval() ประเมิน string เป็นนิพจน์ และคืนค่าผลลัพธ์ อย่างไรก็ตาม ไม่แนะนำให้ใช้งานเพราะมีความเสี่ยงด้านความปลอดภัยและประสิทธิภาพ

1function evaluateExpression(expression: string): any {
2    return eval(expression);
3}
4
5console.log(evaluateExpression("2 + 3")); // 5
6console.log(evaluateExpression("'Hello ' + 'World!'")); // "Hello World!"

• ในตัวอย่างนี้ นิพจน์ที่ถูกกำหนดเป็น string ถูกประเมินค่าโดยใช้ eval และแสดงผลลัพธ์ออกมา

encodeURI()

ฟังก์ชัน encodeURI() เข้ารหัส URL ทั้งหมดและหลบหลีกอักขระบางตัว

1const uri = "https://example.com/page?name=John Doe&age=30";
2const encodedURI = encodeURI(uri);
3
4console.log(encodedURI); // "https://example.com/page?name=John%20Doe&age=30"

• ตัวอย่างนี้แปลงช่องว่างเป็น %20 เพื่อสร้าง URL ที่ปลอดภัย

decodeURI()

ฟังก์ชัน decodeURI() ถอดรหัส URL ที่ถูกเข้ารหัสกลับเป็นรูปแบบเดิม

1const encodedURI = "https://example.com/page?name=John%20Doe&age=30";
2const decodedURI = decodeURI(encodedURI);
3
4console.log(decodedURI); // "https://example.com/page?name=John Doe&age=30"

• ตัวอย่างนี้ถอดรหัส string ของ URL ที่ถูกเข้ารหัสกลับเป็น URL เดิม

setTimeout()

ฟังก์ชัน setTimeout() เรียกใช้ฟังก์ชันที่กำหนดหลังจากเวลาหน่วงที่กำหนด (หน่วยมิลลิวินาที)

1setTimeout(() => {
2    console.log("Executed after 2 seconds");
3}, 2000);

• ตัวอย่างนี้แสดงข้อความหลังจากเวลาผ่านไป 2 วินาที

setInterval()

ฟังก์ชัน setInterval() เรียกใช้ฟังก์ชันที่กำหนดซ้ำ ๆ ในช่วงเวลาที่กำหนด (หน่วยมิลลิวินาที)

1let count = 0;
2const intervalId = setInterval(() => {
3    count++;
4    console.log(`Interval executed ${count} time(s)`);
5    if (count === 3) {
6        clearInterval(intervalId); // Stops the interval after 3 executions
7    }
8}, 1000);

• ตัวอย่างนี้จะแสดงข้อความทุก ๆ หนึ่งวินาที และหยุดหลังจากทำงานครบสามครั้ง

สรุป

ฟังก์ชันในตัวของ TypeScript ทำให้การเขียนโค้ดปลอดภัยและมีประสิทธิภาพมากขึ้นโดยการเพิ่มความปลอดภัยของประเภทข้อมูลให้กับฟังก์ชันมาตรฐานของ JavaScript ฟังก์ชันเหล่านี้ช่วยให้งานเขียนโปรแกรมในชีวิตประจำวันง่ายขึ้น และเพิ่มความเข้าใจและความสามารถในการปรับปรุงโค้ด แต่ละฟังก์ชันถูกใช้อย่างถูกต้องตามวัตถุประสงค์ และด้วยการกำหนดประเภทข้อมูลล่วงหน้า จึงสามารถตรวจจับข้อผิดพลาดได้ล่วงหน้า ซึ่งมีบทบาทสำคัญในการเพิ่มความน่าเชื่อถือของกระบวนการพัฒนา

ด้วยการใช้ TypeScript การพัฒนาสามารถใช้ประโยชน์จาก static typing ในขณะที่ยังคงความยืดหยุ่นของ JavaScript

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video