본문 바로가기
📌 Front End/└ TypeScript

[TypeScript] 타입스크립트 예외 처리 Errors (Try, Catch, Finally, Throw)

by 쫄리_ 2024. 7. 26.
728x90
반응형

📖 예외 처리(exception handling)

코드 실행 중에 예기치 못한 에러가 발생했을 때, 

코드의 실행 흐름을 복구할 수 있는 기능


⏳ 오류의 종류

1. 코드가 실행조차 되지 않는 오류

    프로그램 실행 전에 발생하는 오류를 구문 오류(syntax error)라고 부름.

 

 

2. 코드 실행 중간에 발생하는 오류

    프로그램 실행 중에 발생하는 오류를 

    예외(exception) 또는 런타임 오류(runtime error)라고 부름.


📚 예외 처리

try catch finally

try..catch는 오직 런타임 에러에만 동작

 try {
 	// 1) 먼저 실행된다.
 	// 2) 에러가 없으면 catch 구문은 무시된다.
 	// 3-1) 에러가 있으면 실행이 중단되고, catch 블록으로 error객체를 던진다.
 } catch(error) {
 	// 3-2) try 블록에서 던진 error 객체를 처리한다.
 }
try {
	//코드 실행
	//에러가 없을 경우 finally 블록을 실행한다.
	//에러가 있을경우 실행 중지후, catch블록으로 에러를 던진다.
} catch(error) {
	//에러 핸들링
	//처리 못한 에러는 throw로 다시 던질수 있다.
	//실행 후 finally 블록을 실행한다.
} finally {
	//무조건 실행된다.
}

 

* catch없이 try...finally로도 사용할 수 있다.


✍🏻 동작방식

1. 먼저, try {...} 안의 코드가 실행됩니다.

2. 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다.

3. 에러가 있다면, try 안 코드의 실행이 중단되고, catch(err) 블록으로 제어 흐름이 넘어갑니다. 

    변수 err(아무 이름이나 사용 가능)는 무슨 일이 일어났는지에 대한 설명이 담긴 에러 객체를 포함합니다.

 


🗑️ throw (직접 에러를 만들어서 던짐)

 

Error 객체

  • 런타임 오류 발생시 JS는 에러 객체를 생성하고 이를 던진다.
  • 에러 객체에는 에러에 대한 상세 내용이 담겨있다.

 

Error( ) 생성자

new Error( )

- 매개변수로 message, fileName, lineNumber를 넣을수도 있다. (옵셔널)

- 함수로 호출할 수도 있다.

 

 

인스턴스 속성

- name : 오류 타입 설명을 위한 이름 (초기값: Error)

- message : 오류 메시지, 사람이 읽을 수 있는 오류 설명

- stack : 스택 추적을 위한 비표준 속성 (디버깅 목적으로 주로 사용됨)

 

 

Error 오류 타입

타입명 설명
SyntaxError 문법적으로 유효하지 않는 코드 해석 시 발생
ReferenceError 존재하지 않는 변수 참조 시 발생
RangeError 어떤 값이 집합에 없거나 허용되는 범위가 아닐 때 발생
TypeError 변수나 매개변수가 유효한 자료형이 아니여서 연산할 수 없을 때 발생
URIError 전역 URI 핸들링 함수가 잘못 사용되었을 때
EvalError 전역 eval( ) 함수에 관한 오류
현재는 사용되지 않으나 호환성을 위해 남겨둠

 


📝 throw 형태

아래의 구문들로 스크립트가 중지되는 것을 방지하고, 에러를 처리할 수 있다.

// 단순하게 예외를 발생
throw '에러 메시지';

// 조금 더 자세하게 예외를 발생시킴
throw new Error('에러 메시지');

 

 

타입스크립트에서는 에러가 unknown 타입으로 설정된다.

아무 타입이나 던질 수 있지만, 에러 객체를 던지는 것이 권장되는 방법이다

try {
	throwError();
} catch(e) {
	// e: unknown
}

 

 

다른 언어처럼 원하는 타입의 에러만 catch로 잡을 수 없기 때문에

catch 절 내부에서는 에러 타입에 따라 다른 처리를 하고자 할 때는 분기 처리를 해주어야 한다

catch(e) {
	if (e instanceof TypeError) {
		// TypeError
	}
	else if (e instanceof SyntaxError) {
		// SyntaxError
	}
	else if (typeof e === 'string') {
		// string
	}
	else {
		// other
	}
}

 

 

보통 서비스를 개발할 때 catch절 내에서 로그를 많이 출력해주는데 

에러 객체는 message 프로퍼티를 출력해주고 

에러 객체가 아닌 경우, 문자열로 변경해서 로그를 출력해준다

catch(e) {
	if (e instanceof Error) {
		logger.error(e.message)
	} else {
		logger.error(String(e))
	}
}

 

 

사용예시

// 주류 판매 사이트
// → 미성년자는 접속 불가
let age: number = 17;

try{
    // throw new Error('에러 메시지');
    if( age < 20 ) throw new Error('에러 메시지');

} catch(e){
    console.log("미성년자 입니다.");
}

 

// @ts-ignore
   코드에 에러가 있든 없든 → 무조건 에러를 무시한다.

   사용이유 : 현재 나는 일부러 에러를 발생시켜 확인하기 위함

let a:number = 0;
let result: number = 6;

// ● 오류나는 함수
function Z(){
    // @ts-ignore
    a.f = 5;
    result += 5/a;
}

// ● 오류 컨트롤
try{
    // @ts-ignore
    a.f = 5;
    result += 5/a;

    Z();

} catch(e){ // e는 에러
    // 에러의 종류에 따라서 예외처리 구문을 작성
    // console.log(e);      에러메시지를 담은 객체 정보
    console.log("오류 잡는 동작");
}

728x90
반응형