การจัดการข้อผิดพลาดใน TypeScript

บทความนี้อธิบายการจัดการข้อผิดพลาดใน TypeScript

YouTube Video

การจัดการข้อผิดพลาดใน TypeScript

การจัดการข้อผิดพลาดใน TypeScript โดยพื้นฐานทำโดยใช้โครงสร้าง try...catch เช่นเดียวกับใน JavaScript ใน TypeScript สามารถจัดการเนื้อหาข้อผิดพลาดได้ชัดเจนยิ่งขึ้นด้วยการอนุมานประเภท สิ่งนี้ช่วยให้การจัดการข้อผิดพลาดแม่นยำและอ่านง่ายขึ้น

ไวยากรณ์ try...catch

ไวยากรณ์พื้นฐานสำหรับการจัดการข้อผิดพลาดมีดังนี้:

 1try {
 2    // Code that may throw an error
 3    throw new Error("Something went wrong!");
 4} catch (error) {
 5    // Catch and handle the error
 6    console.error("Error:", error);
 7} finally {
 8    // Code that runs regardless of whether an error occurred
 9    console.log("Finally block executed.");
10}

การจัดการข้อผิดพลาดแบบปลอดภัยต่อประเภท

ใน TypeScript ข้อผิดพลาดที่จับได้ในบล็อก catch จะถูกจัดการเป็นประเภท any แต่แนะนำให้ระบุประเภทที่เหมาะสมเพื่อการจัดการข้อผิดพลาดที่ปลอดภัยยิ่งขึ้น ตัวอย่างเช่น คุณสามารถสร้างและใช้ประเภทข้อผิดพลาดแบบกำหนดเองได้ดังนี้:

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Invalid operation", 400);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    } else {
14        console.error("Unknown error occurred");
15    }
16}

ในตัวอย่างนี้ มีการสร้างคลาสชื่อว่า CustomError และมีการขว้างข้อผิดพลาดที่มีคุณสมบัติเฉพาะ เช่น errorCode ในบล็อก catch ใช้ instanceof เพื่อระบุประเภทของข้อผิดพลาดและดำเนินการจัดการที่เหมาะสม

การจัดการข้อผิดพลาดแบบอะซิงโครนัส

ใน TypeScript try...catch ก็ถูกใช้เพื่อจัดการข้อผิดพลาดเมื่อใช้ฟังก์ชันแบบอะซิงโครนัสเช่นกัน

 1async function fetchData() {
 2    try {
 3        const response = await fetch("https://api.example.com/data");
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Failed to fetch data:", error);
11    }
12}
13
14fetchData();

ในตัวอย่างนี้ มีการดึงข้อมูลโดยใช้ fetch และตรวจสอบ response.ok เพื่อโยนข้อผิดพลาดหากสถานะของโค้ดไม่ใช่ OK ข้อผิดพลาดถูกจับใน catch และมีการส่งออกบันทึกที่เหมาะสม

สรุป

ใน TypeScript การใช้ประเภทเพื่อทำให้เนื้อหาข้อผิดพลาดชัดเจนช่วยให้การจัดการข้อผิดพลาดปลอดภัยและอ่านง่ายยิ่งขึ้น เมื่อจัดการข้อผิดพลาด เป็นสิ่งสำคัญที่ต้องชี้แจงว่าข้อผิดพลาดประเภทใดที่อาจเกิดขึ้นและจัดการตามนั้น

ข้อผิดพลาด

คลาส Error ใน TypeScript ขยายจากคลาส Error ใน JavaScript และเป็นวัตถุพื้นฐานสำหรับการแทนข้อผิดพลาด โดยการใช้คลาส Error คุณสามารถสร้างวัตถุที่รวมข้อความข้อผิดพลาดและดำเนินการจัดการข้อผิดพลาด

พื้นฐานของคลาส Error

คลาส Error ถูกใช้งานดังนี้

1const error = new Error("Something went wrong!");
2console.log(error.message); // "Something went wrong!"
3console.log(error.name);    // "Error"

คุณสมบัติ

คลาส Error มีคุณสมบัติดังต่อไปนี้:

• ข้อความ สตริงที่แสดงข้อความข้อผิดพลาด
• ชื่อ ชื่อของข้อผิดพลาด ค่าเริ่มต้นคือ "Error" แต่สามารถเปลี่ยนได้โดยการสร้างคลาสข้อผิดพลาดแบบกำหนดเอง
• สแตก ข้อมูลสแตกเทรซที่ใช้สำหรับการดีบัก สตริงที่แสดงว่ารหัสใดทำให้เกิดข้อผิดพลาดในขณะนั้น

คลาสข้อผิดพลาดแบบกำหนดเอง

สามารถขยายคลาส Error และสร้างคลาสข้อผิดพลาดของคุณเองได้ เป็นประโยชน์ในสถานการณ์ที่ต้องการการจัดการข้อผิดพลาดเฉพาะเจาะจง ตัวอย่างเช่น มันมีประสิทธิภาพเมื่อคุณต้องการจัดการข้อผิดพลาดหลากหลายประเภท เช่น ข้อผิดพลาดการเรียก HTTP หรือข้อผิดพลาดฐานข้อมูล

ตัวอย่างการสร้างข้อผิดพลาดแบบกำหนดเอง

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message); // Call the constructor of the parent class 'Error'
 4        this.name = "CustomError"; // Set the name of the error
 5    }
 6}
 7
 8const customError = new CustomError("Invalid operation", 400);
 9console.log(customError.message);   // "Invalid operation"
10console.log(customError.name);      // "CustomError"
11console.log(customError.errorCode); // 400

• โดยการสร้างคลาส CustomError และเพิ่มข้อมูลเช่นรหัสข้อผิดพลาด คุณสามารถจัดการข้อมูลที่ครอบคลุมเกี่ยวกับข้อผิดพลาดได้มากขึ้น

การสืบทอดคลาส Error

ใน TypeScript เมื่อสร้างคลาสข้อผิดพลาดแบบกำหนดเองโดยการขยายคลาส Error มีบางจุดที่ต้องระวัง

1. การเรียกใช้ super() ในคอนสตรัคเตอร์ของคลาสข้อผิดพลาดที่กำหนดเอง คุณต้องเรียก super() เพื่อเรียกคอนสตรัคเตอร์ของคลาส Error สิ่งนี้ช่วยให้มั่นใจว่า message และ stack ได้รับการกำหนดค่าเริ่มต้นอย่างถูกต้อง

2. การเพิ่มคุณสมบัติ หากคุณต้องการเพิ่มข้อมูลเพิ่มเติมให้กับวัตถุข้อผิดพลาด ให้กำหนดคุณสมบัติใหม่ภายในคลาส ตัวอย่างเช่น ในคลาส CustomError ข้างต้น มีการเพิ่มคุณสมบัติ errorCode

การขว้างและการจับข้อผิดพลาด

คุณสามารถจัดการข้อผิดพลาดโดยการขว้างข้อผิดพลาดด้วยคลาส Error หรือคลาสข้อผิดพลาดที่กำหนดเอง แล้วจึงจับข้อผิดพลาดเหล่านั้น

 1function riskyOperation() {
 2    throw new Error("Something went wrong during the operation");
 3}
 4
 5try {
 6    riskyOperation();
 7} catch (error) {
 8    if (error instanceof Error) {
 9        console.error(error.message);  // "Something went wrong during the operation"
10        console.error(error.name);     // "Error"
11    }
12}

ในกรณีของข้อผิดพลาดแบบกำหนดเอง ให้ใช้ instanceof เพื่อตรวจจับข้อผิดพลาดเฉพาะและจัดการอย่างเหมาะสม

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Database connection failed", 500);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    }
14}

สรุป

คลาส Error ใน TypeScript เป็นคลาสพื้นฐานสำหรับการจัดการข้อผิดพลาดมาตรฐาน นอกจากนี้ โดยการขยายคลาส Error เพื่อสร้างข้อผิดพลาดแบบกำหนดเอง การจัดการข้อผิดพลาดอย่างยืดหยุ่นตามประเภทและข้อมูลเพิ่มเติมของข้อผิดพลาดจะกลายเป็นไปได้

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

YouTube Video