타입 단언이란?

컴파일러에게 특정 값이 어떤 타입인지 개발자가 더 잘 알고 있다고 알려주는 방법
as를 이용해 타입을 단언하면, 자동 추론된 타입을 덮어쓰게 됨
이는 컴파일러가 타입을 자동으로 추론하지 못하거나 잘못 추론하는 상황에서 사용됨

ex - DOM 요소를 가져오는 document.getElementById() 메서드의 반환 타입은 HTMLElement | null 로 정의되어 있음
하지만 개발자가 해당 요소가 HTMLDivElement임을 확신한다면, as HTMLDivElement를 사용해 컴파일러에게 명시적으로 알려줄 수 있음

const element = document.getElementById("myElement") as HTMLDivElement;

element.style.backgroundColor = "blue"; 

타입 단언은 주로 API나 외부 라이브러리의 반환 타입을 확실히 알고 있을 때 사용됨
컴파일러가 타입 추론에 실패하거나 경고를 발생시키는 경우 타입 단언을 통해 올바른 타입을 지정할 수 있음

타입 단언 시 주의사항

컴파일러의 타입 검사를 우회하기 때문에, 실제 값이 단언한 타입과 다르면 런타임 에러가 발생할 수 있음
따라서 해당 타입을 확실히 알고 있을 때만 사용하는 것이 중요,
가능한 한 타입 추론과 타입 가드를 우선적으로 사용하는 것이 바람직
잘못된 사용은 오히려 ts의 장점을 훼손하며, 오히려 코드의 안정성을 해칠 수 있음

타입 단언을 더 안전하게 활용하기 위한 원칙?

1. 타입 단언보단 타입 내로잉(narrowing)을 우선적으로 활용
   ts는 조건문과 타입체크를 통해 자동으로 타입을 좁힐 수 있어, 가능한 한 단언 없이 타입 명확히 하는 방식 권장

function printLength(value: string | string[]) {
  if (Array.isArray(value)) {
    console.log(value.length); // 타입 내로잉으로 배열로 안전하게 처리
  } else {
    // 문자열로 처리
  }
}

변수의 타입을 더 구체적으로 좁힌다 보면 됨
또한 type predicate를 활용한 타입 가드를 통해서도 타입 안정성을 높일 수 있음

function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

if (isFish(pet)) {
    pet.swim();
}

isFish 함수는 Fish or Bird 타입의 pet을 인수로 받음
pet is Fish를 사용해서 true를 반환하면 pet이 Fish 타입임을 보장
그래서 만약 if 로 true면 Fish타입으로 간주되어 swim()메서드를 안전하게 호출 가능

마지막으로 타입 단언은 최소한의 범위에서 사용하는게 좋음
전체 객체보단 필요한 속성이나 특정 부분만 단언하는 방식으로 불필요한 위험을 줄이는 것이 바람직

const element = document.getElementById("myElement");
if (element) {
  (element as HTMLDivElement).style.backgroundColor = "blue"; // 필요한 부분만 단언
}