비동기 호출을 하다보면 다양한 상태코드에 따라 401(인증되지 않은 사용자), 404(존재하지 않는 리소스), 500(서버 내부 에러) 혹은 CORS 에러와 같은 다양한 에러가 발생합니다.타입 스크립트에선 이러한 비동기 API 에러를 어떻게 처리 및 명시할 수 있는지 6가지 정리해보았습니다.  1. 타입 가드 활용하기타입 가드를 활용하면 서버 에러를 명시적으로 확인할 수 있습니다.1) 명시적으로 표시하기아래와 같이 서버에서 전달하는 공통 에러 객체에 대해 타입을 정의할 수 있습니다.// 서버에서 전달하는 공통 에러 객체 타입 정의interface ErrorResponse { status: string; errorCode: string; errorMessage: string;}2) Axios 라이브러리의 ..

자바스크립트의 유연함이 때로는 장점이 되기도 하지만, 종종 예상치 못한 런타임 오류의 원인이 되기도 합니다. 타입스크립트는 이러한 자바스크립트의 한계를 극복하기 위해 만들어졌습니다.  정적 타입 시스템을 통해 코드 실행 전 많은 오류를 미리 잡고, 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다.  하지만 브라우저와 Node.js는 여전히 자바스크립트만 이해할 수 있는데, 타입스크립트 코드는 어떻게 동작하는 걸까요? 타입스크립트 컴파일러의 내부 동작 원리를 살펴보고, 소스 코드가 어떻게 검사되고 변환되는지, 컴파일 과정의 각 단계를 살펴보며, 타입스크립트의 안전성과 한계도 정리해보았습니다.  1. 자바스크립트의 런타임과 타입스크립트의 컴파일// 🎯 타입스크립트에서는 컴파일 시점에 타입 검..

이번 글에서는 Typescript의 타입을 활용하는 방법들을 정리해보았습니다.  1) 조건부 타입타입에서 조건에 따라 다른 타입을 반환해야 할 때 사용합니다. 타입스크립트의 조건부 타입은 자바스크립트의 삼항 연산자와 동일한 Condition ? A : B 형태를 가집니다.  (1) extends와 제네릭을 활용한 조건부 타입 extends는 타입 확장 뿐 아니라 조건부 타입 설정에서도 사용되고, 제네릭 타입에서는 한정자 역할로도 사용됩니다.  아래 코드들은 결제 수단과 관련된 타입입니다.  // 결제 수단 관련 타입 정의interface Bank { financialCode: string; name: string; // 기타 은행 관련 속성}interface Card { financialCode:..

이번 글에서는 Typescript의 타입 확장과 타입 좁히기에 대해 정리해보았습니다.  1. 타입 확장하기타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 의미합니다. 타입 확장의 가장 큰 장점은 기존 타입을 바탕으로 타입을 확장함으로서 불필요한 코드 중복을 줄일 수 있다는 점입니다.   interface와 type 키워드로 정의된 타입은 extends, 교차 타입, 유니온 타입을 사용해 타입을 확장합니다. extends, 교차 타입, 유니온 타입 간의 차이를 파악하고 언제 사용하면 좋은지 정리해보았습니다.  1) extends extends를 활용하면 기존 타입을 확장해 새로운 타입을 정의할 수 있습니다. 아래 예시 코드를 살펴보겠습니다. 예시 코드// 기본 장바구니 아이템 타입interfa..