내일배움캠프 React트랙 77일차 회고 (2022.02.15)

타입 단언(Type Assertion)

단언: 주저하지 아니하고 딱 잘라 말함

any와 같이 생각없이 남발하면 좋지않은 문법이다.

• 단언 키워드 : as
• Non-null 단언 연산자 : ! -> "null 혹은 undefined가 반드시 아니다!"
• 할당 단언 연산자: ! -> "할당을 한거야!"

 

// 1)
const el = document.querySelector("body");
el.textContent = "Hello world?!";

• documnet.queryselector라는 메서드는 선택자로 요소를 찾지 못하면, null데이터를 반환한다. 
• HTML내에 body태그는 반드시 있지만, 타입스크립트는 선택된 태그가 body태그인지, 있을수도 없을수도있는 선택자인지 모르므로 null값이 나올수 있다고 판단한 것이다. 이럴떄 개발자는 두가지 단언을 통해 해결할 수 있다.

// 첫번쨰 방법
const el = document.querySelector("body") as HTMLBodyElement;
el.textContent = "Hello world?!";

// 두번쨰 방법
const el = document.querySelector("body");
el!.textContent = "Hello world?!";

// 타입 가드를 이용한 올바른 방법
const el = document.querySelector("body");
if (el) {
  el.textContent = "Hello world?!";
}

 

---

// 2)
function getNumber(x: number | null | undefined) {
  return Number(x.toFixed(2));
}

toFixed는 number타입의 메서드인데 변수x는 유니온타입으로 number타입, null타입, undefined타입이 지정될 수  있으므로 에러가 발생한다. 이때 확실히 넘버타입이 올거라고 단언해주면 에러는 발생하지 않는다. 

// 첫번째 방법
function getNumber(x: number | null | undefined) {
  return Number((x as number).toFixed(2));
}
getNumber(3.14)
getNumber(null)

// 두번째 방법
function getNumber(x: number | null | undefined) {
  return Number(x!.toFixed(2));
}
  getNumber(3.14)
  getNumber(null)

하지만 이러한 Assertion은 개발자가 잘못된 단언을 했을 시(위의 코드는 잘못된 단언임) 코드작성시 에러가 발생하지 않는것일뿐 런타임에서 getNumber(null)과 같이 오류가 발생하는것까지 방지하지는 못한다.

// 타입 가드를 이용한 올바른 방법
function getNumber(x: number | null | undefined) {
  if (x) {
    return Number(x.toFixed(2));
  }
}
getNumber(3.14);
getNumber(null);

---

// 3)
function getValue(x: string | number, isNumber: boolean) {
  if (isNumber) {
    return Number(x.toFixed(2));
  }
  return x.toUpperCase();
}

마찬가지로 Assertion을 통해 코드작성시의 에러는 잠재울 수 있지만, 코드실행결과의 에러까지 방지하지는 못한다.

function getValue(x: string | number, isNumber: boolean) {
  if (isNumber) {
    return Number((x as number).toFixed(2));
  }
  return (x as string).toUpperCase();
}
getValue("Hello world", false);
getValue(3.14, true);

---

let num: number
console.log(num);

이때의 !키워드는 Non-null연산자가 아닌 할당 단언연산자이다. 즉, 할당되지도 않은 값을 참조하려해서 에러를 발생시키니 

할당하지는 않았지만, 거짓말로 "할당했으니까 에러 발생시키지마!"라고 해주는 것이다.

let num!: number
console.log(num);