[TypeScript] 타입단언 + 널 병합 연산자 + 옵셔널 체이닝

1. 타입 단언 (Type Assertion)

타입 단언이란? 개발자가 타입스크립트에게 🗣️ "이 값의 타입은 내가 더 잘 앎"이라고 알려주는 기능

사용목적: WEB API 사용 시 타입 추론을 제대로 못하는 경우 사용

1.1 타입 단언 사용법

1. <> 문법 (거의 사용하지 않음)
2. as 문법 (더 많이 사용됨)

let value: string = "hi";

// 방법 1: <>
(<string>value).toUpperCase();

// 방법 2: as
(value as string).toUpperCase();

⚠️ 주의: 타입 단언으로 발생하는 모든 에러는 개발자의 책임

1.2 타입 단언의 활용 예시: DOM 요소 접근

타입스크립트는 DOM 요소의 타입을 명확히 추론하지 못하는 경우가 많음. 이런 경우, 타입 단언을 활용하면 에러 해결 가능

const button = document.getElementById("button");

// 에러 발생: 'null'일 가능성 있음
// button.click();

// 해결 방법 1: 타입 단언 사용
(button as HTMLElement).click(); // ✅ 타입을 명시하여 에러 해결

// 해결 방법 2: 옵셔널 체이닝(js) 연산자 사용
button?.click(); // ✅ 안전하게 버튼이 존재할 때만 실행

// 해결 방법 3: 널 아님 단언(ts) 연산자 사용
button!.click(); // ✅ 널이 아님을 보장

2. 타입 가드 (Type Guard)

타입 가드는 자바스크립트의 조건문을 활용하여 변수의 타입을 좁혀주기 위해 사용

런타임에 타입을 확인하고 안전하게 타입에 맞는 동작을 수행할 수 있도록 도움

2.1 타입 가드의 기본 예시

아래는 typeof를 사용하여 unknown 타입을 string으로 좁히는 예제

let value: unknown = "hi";

if (typeof value === "string") {
  // value가 string 타입으로 좁혀짐
  console.log(value.toUpperCase()); // HI
}

3. 널 병합 연산자와 옵셔널 체이닝

타입 단언과 타입 가드 외에도 널 병합 연산자와 옵셔널 체이닝은 코드의 안정성을 높이는 데 유용함

3.1 널 병합 연산자 (??)

널 병합 연산자는 값이 null 또는 undefined일 때 대체값을 제공

let foo: string | null = null;

// null 또는 undefined일 경우 "default value" 사용
//널 병합 연산자는 null or undefined만 체크
let foo2 = foo ?? "default value";

console.log(foo2); // "default value" 전송됨

💡 실행 결과: foo가 null이므로 "default value" 출력

3.2 옵셔널 체이닝 (?.)

옵셔널 체이닝은 객체의 특정 속성이나 메서드에 접근할 때 해당 값이 존재하는지 확인한 뒤 접근하도록 도움

function printUser(user: { name: string; age?: number } | null) {
    // console.log(user.name); //❌ 에러: 값이 null일 수도 있음
    console.log(user?.name); //✅ 해결: 옵셔널체이닝
}

let user = { name: "james" };
printUser(user); // "james"

💡 실행 결과: "james" 출력. user가 null일 경우 아무 것도 출력되지 않음

특성	타입 단언	타입 가드
사용 문법	타입스크립트	자바스크립트
정의	개발자가 타입스크립트에게 타입을 직접 알려주는 기능	조건문을 사용하여 런타임에 타입을 좁히는 기능
사용 시점	컴파일 시(정적)	런타임 시(동적)
주요 문법	as키워드 또는<>기호	typeof,instanceof등의 연산자

요약

• 타입 단언 (Type Assertion): 타입스크립트보다 개발자가 타입을 더 잘 아는 경우 직접 타입을 지정
• 타입 가드 (Type Guard): 조건문으로 런타임에 타입을 좁혀 안전성을 확보
• 널 병합 연산자 (??): null 또는 undefined일 때 대체값 제공
• 옵셔널 체이닝 (?.): 객체나 메서드 접근 시 값이 있는지 확인 후 안전하게 접근

출처: 수코딩