TypeScript 타입 단언, 할당 단언, 가드, 별칭

새싹 수업 당시에 TypeScript를 배웠지만, 빠르고 짧게 배워서 어설프게 아는 상태였다. 이번에 새로 들어온 교육에서도 속성이긴 했지만 더 어려운 내용들을 배웠다. 토이 프로젝트 마무리하고 포트폴리오 정리하느라 일주일이 지난 오늘에야 학습 내용들을 블로그에 정리해본다.

---

타입 단언 (Type Assertion)

컴파일 시점에 변수를 특정 타입으로 이해하도록 강제시키는 방법.

const el = document.querySelector('body') as HTMLBodyElement;
el.textContent = 'Hello, World!';

→ 여기서 변수를 선언할 때, as HTMLBodyElement 부분이 없으면 TS는 el이 'null'을 갖고 있다고 생각할 수 있다.

따라서 el 변수가 HTMLElement 타입을 갖고 있다고 개발자가 명확하게 단언해야한다.

---

as 키워드

function getNum(x: number | null | undefined) {
  return Number((x as number).toFixed(2));
}
getNum(3.1415);
getNum(null);

→ 여기서는 getNum() 함수의 매개변수에서 x가 가질 수 있는 타입을 지정했기 때문에, return에서도 as 키워드를 사용해서 x의 타입을 알려줘야 오류가 발생하지 않는다.
- toFixed(): 주어진 매개변수만큼 소수점 뒷자리 자르는 메서드

---

non-null 단언 연산자

function getNum2(x: number | null | undefined) {
  return Number(x!.toFixed(2));
}
getNum2(3.14);
getNum2(null);

→ 마찬가지로 함수의 매개변수에서 x의 타입을 지정하고 있어서, return에서도 x의 타입이 뭔지 알려줘야한다.

여기서는 non-null 연산자를 사용해서 x가 null 또는 undefined가 아니라고 단언하고 있다.

하지만 x가 null 혹은 undefined라면, toFixed(2)는 숫자 타입일 경우에만 사용 가능한 메서드라서 런타임 오류가 발생한다.

그러므로 아래 코드처럼 함수 내부에 if문을 작성해서, x의 타입을 확인하고 그에 맞는 결과를 출력하도록 해야 한다.

function getNum3(x: number | null | undefined) {
  if (x === null || x === undefined) {
    return 0;
  }
  return Number(x.toFixed(2));
}
getNum3(3.14);
getNum3(null);

---

할당 단언 (Non-null Assertion)

변수가 나중에 값을 가질 것이라고 컴파일러에게 확신을 주는 방식.

let num1!: number;
console.log(num1);
num1 = 10;

→ 변수는 있는데 값이 없으면, TS는 변수가 사용되기 전에 값이 없을 수 있다고 생각해서 오류가 발생한다.

변수에 !연산자를 사용하여 "이 변수는 나중에 반드시 값을 가질 것"이라고 할당 단언하면 오류 해결이 가능하다.

---

타입 가드 (Type Guard)

특정 조건을 통해 변수가 어떤 타입인지 확실하게 결정하는 것.

function logText(a: Element) {
  console.log(a.textContent);
}
const a = document.querySelector('div') as Element;
logText(a);

→ 여기서 logText() 함수는 Element 타입을 인수로 받고, 만약 a가 Element 타입이면 콘솔에 해당 콘텐츠를 출력한다.

그런데 document.querySelector('div')는 null일 가능성이 있다.

as Element라고 단언해줘도, a가 null일 가능성은 여전히 존재하기 때문에 콘솔창에서 오류가 발생한다.

그러므로 아래 코드처럼 작성해야 오류가 생기지 않는다.

function logText2(b: Element | null) {
  if (b === null) {
    return;
  }
  console.log(b.textContent);
}
const b = document.querySelector('div');
logText2(b);

→ 여기서는 함수의 인자로 element 혹은 null일 가능성이 있는 b를 받고 있는데,

함수 내부에는 if문으로 만약에 b가 null일 경우에 반환할 결과값을 설정하고,

if문 밖에서는 b가 element일 경우에 반환할 결과값을 설정했기 때문에 오류가 생기지 않는다.

---

타입 별칭 (Type Aliases)

새로운 타입을 정의하는 용도. 기존 타입을 참조하여 새로운 타입을 정의할 수 있다.

type Cat =
  | {
      name: string;
      age: number;
      role: boolean;
    }
  | [string, number, boolean];
// -> 여기서는 객체형, 배열형(tuple형) 둘 중에 하나를 가질 수 있다는 의미

const cat1: Cat = {
  name: '분필',
  age: 2,
  role: false,
};

const cat2: Cat = ['후추', 3, true];