타입 단언은 위험해? - ‘as’, 알고 쓰자!

🧐타입 단언은 왜 등장했는가?

• 타입스크립트 컴파일러는 타입 표기, 타입 좁히기(type narrowing)와 타입 추론 등의 기법을 이용해 값의 타입을 판단한다.

그러나 컴파일러의 정보 대신, 프로그래머가 원하는 타입을 값에 할당하고 싶다면?

• 위의 경우를 위해 등장한 것이 타입 단언(type assertion)이다.

---

🔎타입 단언(Type Assertion)이란 무엇인가?

• 타입 단언은 아래와 같은 형태로 이루어진다.

value as Type

• 아래의 코드로 타입 단언의 예시를 확인해보자.

interface Dog {
  legs: 4;
  bark(): void;
}

interface Insect {
  legs: number;
  creepy: boolean;
}

interface Fish {
  swim(): void;
}

type Animal = Dog | Insect | Fish;

function doSomethingWithAnimal(animal: Animal) {
  (animal as Fish).swim();
} 

• Dog라는 객체 타입, Insect라는 객체 타입, Fish라는 객체 타입이 있다.
• 동물은 이렇게 3가지 타입이 있다.
• doSomethingWithAnimal 이라는 함수는 어떤 기능을 하고 있는지 살펴보면,
  • 이 함수의 매개변수인 animal 객체를 Fish 타입이라고 단언한다.
    • Fish라고 단언된 animal 객체는, swim이라는 메서드를 사용할 수 있다. (Fish인 경우만 swim할 수 있다고 가정하는 맥락임.)

예상되는 문제에는 어떤 것이 있을까?

• doSomethingWithAnimal이라는 함수에 Dog 또는 Insect 타입을 넣어주면, 각각의 타입으로 된 객체는 swim이라는 기능(메서드)를 사용할 수 없으므로, 오류가 발생할 것이다.

✔타입 단언은, 타입 에러가 사라질 뿐 런타임 에러는 막아주지 않는다.

---

타입 단언에 대한 마음가짐…

• 개발자: 이 값이 어떤 타입인지는 내가 가장 잘 알아! or 내가 정할 거야!
  • 이러한 의도를 타입을 단언하면, 타입 단언으로 인한 에러 역시 개발자의 책임이 된다.
• 타입 선언에서 잘못된 타입의 값이 할당되면, 타입 체커가 친절하게 오류를 내뿜는다.
  • 이러한 친절함을 무시하고 타입을 지정하는 것은, 항상 옳지 않은 방식인가?
  즉, 타입 단언은 지양해야 하는 것인가?### 타입 단언이 필요한 경우도 있을까?
• ### 지양해야 한다면, 어떠한 경우가 있을까?

---

⚠타입 선언으로 충분한 경우, 타입 단언 피하기

• 타입 선언을 통해 타입 체커가 어떤 타입인지 명확히 추론할 수 있다면, 타입 단언을 사용할 이유가 없다.

타입 선언 예시 - 화살표 함수의 타입 선언

• 화살표 함수의 타입 선언은 추론된 타입이 모호할 수 있다.
• 아래 코드에서 Person interface를 사용하고 싶다고 해보자.

interface Person { name: string };

const people = ['alice', 'bob', 'jan'].map(name => ({name});
// Person[]을 원했지만 결과는 { name: string; } []...

• 그렇다면 어떤 식으로 코드를 짜야 할까?
  • 타입 단언으로 해결한다면?

  interface Person { name: string };
  const people = ['alice', 'bob', 'jan'].map(
    name => ({name} as Person)
  ); // Type is Person[]
  

  • 단, 위와 같은 단언문 방식은 런타임 상에서 오류가 발생할 수 있다.
  • 그러므로 단언문을 쓰지 않고, 아래와 같이 화살표 함수 내에서 타입과 함께 변수를 직관적으로 선언해보자!

const people = ['alice', 'bob', 'jan'].map(name => {
	const person: Person = {name};
	return person
});   // 타입은 Person[]

• 또는 변수 대신 함수의 반환 타입을 선언할 수 있다!

const people: Person[] = ['alice', 'bob', 'jan'].map(name => {
	(name): Person => ({name})
}); 

• 따라서 타입 단언이 꼭 필요한 경우가 아니라면, 안정성 체크가 되는 타입 선언을 사용하는 것이 바람직하다.

---

✨타입 단언은 언제 필요한가?

✅타입 정보를 개발자가 더 잘 아는 경우

1. DOM Element

• DOM Element는 타입스크립보다 우리가 더 잘 아는 정보이다.
• 타입스크립트는 DOM에 접근할 수 없기 때문에, 타입 단언을 쓰는 것이 타당하다.
• 아래와 같이 버튼 객체에 접근할 때, 이 버튼을 as HTMLButtonElement 라고 단언해주는 것이 좋다.

document.querySelector('#myButton').addEventListener('click', e => {
  e.currentTarget // Type is EventTarget
  const button = e.currentTarget as HTMLButtonElement;
  button // Type is HTMLButtonElement
});

• 또는 ! 를 이용해 null이 아님을 단언해줄 수도 있다.

const elNull = document.getElementById('foo');  // Type is HTMLElement | null
const el = document.getElementById('foo')!; // Type is HTMLElement

---

✅3줄 요약

타입 단언보다는 타입 선언을 사용하자.

TS보다 더 잘 아는 타입이라면 타입 단언을 사용하자.

as나 ! 를 사용하여 타입 단언을 한다.