패스트캠퍼스 환급챌린지 38일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250807(목) 38일차

문법 - 타입 가드 / @types

 

타입 가드(Type Guard)

function doubleType(a: string | number) {
  if (typeof a === "string") {
    return a.replace("x", "X"); //문자열로 좁혀짐
  }
  return a.toString(); // 타입 가드 없으면 replace 불가
}

typeof, instanceof, in 연산자 등을 활용하여 런타임 조건문이 타입을 좁혀주는 역할을하고

타입스크립트는 조건문 흐름을 분석해 리플레이스 등의 메서드 접근 가능 여부를 판단한다

이러한 코드 흐름 기반의 체크는 컴파일 타임에 오류를 예방하는 중요한 도구가 된다

 

옵셔널 체이닝 vs 타입 가드

function foo(a?: number | null) {
  if (!a) return;
  return a.valueOf(); // 안전
}

 

옵셔널한 값은 if (!a) 같은 검사를 통해 존재 여부를 선제적으로 확인해야 하고
단순히 a?.valueOf()로 넘길 수도 있지만, 이는 오작동을 감추는 위험이 있을 수 있으므로 상황에 따라 판단해야 한다

 

커스텀 타입 가드

interface Foo { foo: number }

function isFoo(obj: any): obj is Foo {
  return obj && typeof obj.foo === "number";
}

const maybeObj: any = { foo: 42 };
if (isFoo(maybeObj)) {
  maybeObj.foo.toFixed(); // 안전
}

런타임에서 객체가 특정 인터페이스 형태를 따르는지 검사해 타입을 강제할 수 있지만
인터페이스에 없는 속성은 체크되지 않기 때문에 보완이 필요

 

@types를 이용한 외부 라이브러리 타이핑

외부 라이브러리가 타입스크립트를 직접 지원하지 않을 경우

@types/로 시작하는 타입 정의 패키지를 설치하면 된다

 

이번 강의를 통해 타입스크립트의 정적 타임 검사 능력을 깊이 이해할 수 있었고

단순히 변수의 타입만 확인하는 수준을 넘어 조건문 흐름을 따라 타입을 좁혀나가는 방식의 핵심인 타입 가드 개념을 익힐 수 있었다