[TS] 타입 단언보다는 타입 선언을 사용하기 #TIL

타입 스크립트에서 타입을 부여하는 방법은 두가지입니다.
1. 타입 선언(:)
2. 타입 단언 (as)

두가지 방식을 적절하게 이용하는 것이 중요합니다.

타입 단언은 타입 체커에 의해 오류를 발생 시키지 않는다.

예)

interface Person {
  name: string;
}

const alice: Person = { name: "Alice" }; // 타입 선언 => 타입 체커가 값이 해당 타입이 맞는지 체크한다.
const bob = { name: "Bob" } as Person; // 타입 단언 해당 값이 타입이 맞다고 타입체커에게 알려준다. 즉 오류 무시

const park: Person = {};  // 타입 체커에 의해 오류가 발생
const hong = {} as Person // 타입 체커가 동작하지 않는다.

위의 예시에서 타입 단언은 타입체커에게 오류를 무시하라는 것과 같습니다. 이는 올바른 동작이 아닙니다. 그러므로 타입 선언을 통해 좀 더 타이트하게 타입 체크를 하는게 낫습니다.

또 다른 예시로는 새로운 프로퍼티를 추가에 대해서도 오류를 발생시키지 않습니다.

const henry = {
  name: "henry",
  occupation: "developer",
} as Person; // 추가 속성에 대한 오류 X

타입 추론에 의한 타입이 모호할 경우

타입 추론에 의한 결과가 모호할 경우, 타입 선언이나 타입 단언으로 구체화할 수 있습니다.

예시)

const people = ['jam', 'park', 'hong'].map(name => ({name}));  // 추론한 타입은 string[]
const people1 = ['jam', 'park', 'hong'].map(name => ({name}) as Person);  // 타입 단언으로 Person[]으로 구체화 
const people2 = ['jam', 'park', 'hong'].map(name => {
  const person: Person = {name};
  return person;
});  // 타입 선언으로 Person[] 구체화
['jam', 'park', 'hong'].map((name): Person => ({name})); // 타입 선언방식의 간소화 

위와 같이 타입 추론이 모호할 경우에도 타입 단언보다 타입 선언을 이용하는 것이 좋습니다.

타입 단언은 타입 추론에 의한 결과보다 타입에 대해 명확히 알 때 사용

// 단언문은 우리가 타입스크립트보다 타입 추론이 더 정확할 때 사용하자. => 예 DOM API
document.querySelector("#myButton").addEventListener("click", (e) => {
  const button = e.currentTarget as HTMLButtonElement; // 이와 같이 해당 타겟이 버튼이라고 나만 알고 있기에 단언문을 사용한다.
});

위에서 e의 currentTarget은 HTMLButtonElement이란 것을 내 자신이 잘 알기에 단언으로 구체화하는 것이 좋습니다.

!을 이용하여 null이 명확히 아닐 때 사용하는 경우도 있습니다. 주의할 점은 단언문은 컴파일 과정 중 제거되므로 명확히 null이 아닐 때만 사용해야 합니다.