Articles
TypeScript 소개
타입스크립트의 에러 처리

타입스크립트의 에러 처리

이 글은 타입스크립트에서의 에러 처리에 대해 설명합니다.

YouTube Video

타입스크립트의 에러 처리

타입스크립트에서의 에러 처리는 기본적으로 JavaScript와 마찬가지로 try...catch 구조를 사용합니다. 타입스크립트에서는 타입 추론을 통해 에러 내용을 더 명확하게 관리할 수 있습니다. 이는 더 정확하고 가독성 있는 에러 처리를 가능하게 합니다.

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}

타입 안전한 에러 처리

타입스크립트에서는 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를 사용하여 데이터를 가져오고, 상태 코드가 OK가 아닌 경우 에러를 던지기 위해 response.ok를 확인합니다. 에러는 catch에서 잡히며, 적절한 로그가 출력됩니다.

요약

타입스크립트에서는 타입을 사용하여 에러 내용을 명확히 하는 것이 에러 처리를 더 안전하고 가독성 있게 만듭니다. 에러를 처리할 때 어떤 종류의 에러가 발생할 수 있는지 명확히 하고, 이에 따라 처리하는 것이 중요합니다.

에러

타입스크립트의 Error 클래스는 JavaScript의 Error 클래스를 확장하며, 에러를 나타내는 기본 객체입니다. Error 클래스를 사용하여 에러 메시지를 포함하는 객체를 생성하고 에러 처리를 수행할 수 있습니다.

Error 클래스의 기본

Error 클래스는 다음과 같이 사용됩니다.

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

속성

Error 클래스는 다음과 같은 속성을 가지고 있습니다:.

  • message 오류 메시지를 나타내는 문자열입니다.
  • name 오류의 이름입니다. 기본적으로는 "Error"이지만, 사용자 정의 오류 클래스를 생성하여 변경할 수 있습니다.
  • stack 디버깅에 사용되는 스택 추적 정보입니다. 오류가 발생했을 때 어떤 코드가 원인인지 나타내는 문자열.

사용자 정의 오류 클래스

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 클래스나 커스텀 오류 클래스를 사용하여 오류를 발생시키고, 이를 catch하여 오류를 처리할 수 있습니다.

 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}

요약

TypeScript의 Error 클래스는 표준 오류 처리를 수행하기 위한 기본 클래스입니다. 더욱이 Error 클래스를 확장하여 사용자 정의 오류를 생성함으로써, 오류 유형 및 추가 정보를 기반으로 유연한 오류 처리가 가능합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

타입스크립트의 데코레이터