TypeScript 리터럴 타입, 타입 단언, 타입 가드

리터럴 타입

특정 값 자체를 타입으로 사용한다.

• string처럼 문자열 전체가 지정 가능한 타입이 아니라 ‘하루’, ‘나무’ 같은 특정 값만 가지도록 제한하는 타입
• 잘못된 값의 입력을 미리 막아서 타입 안전성을 높인다.

(() => {
  function walk(name: string, time: number) {
    console.log(`${time}시간 동안 ${name}과 산책합니다.`);
  }
  walk("하루", 1);
  walk("나무", 2);
  walk("이틀", 3);

  // FIXME name: '하루' 또는 '나무'로 제한
  // FIXME time: 1시간 또는 2시간으로 제한
  function walkWithMyDog(name: "하루" | "나무", time: 1 | 2) {
    console.log(`${time}시간 동안 ${name}와 산책합니다.`);
  }
  walkWithMyDog("하루", 1);
  walkWithMyDog("나무", 2);
  // walkWithMyDog("이틀", 3); // 타입 에러 발생
})();

타입 단언

타입스크립트의 타입 추론에 기대지 않고 명시적으로 직접 타입을 지정한다.

• as 키워드로 타입을 지정하면 타입스크립트 컴파일러가 타입 검사를 수행하지 않는다.
• 넓은 범위의 타입을 더 구체적인 타입으로 지정할 때 사용한다.

1. 타입 단언 대상

• 리터럴: 원시형 데이터 타입의 값, 객체, 함수의 리턴값

2. 주의 사항

• as 키워드는 변수에는 지정할 수 없고 데이터(값)에만 지정할 수 있다.
• 호환되는 타입으로만 타입 단언이 가능하다.
• any, unknown은 모든 타입과 호환 가능하다.
• any로 타입 단언을 하면 TSC가 타입 검사를 하지 않는다. ⇒ 런타임 오류 발생 가능성이 높아지므로 남용하지 않는 게 좋다.
  
• 가능하다면 타입은 선언해서 사용하고 꼭 필요한 경우에만 타입 단언 사용을 권장한다.

(() => {
  // number 타입이나 string 타입을 받아서 그대로 리턴하는 함수
  // 리턴값은 string | number 타입으로 추론
  function getMsg(msg: string | number) {
    return msg;
  }

  const msg1: number = getMsg(123.456) as number;
  console.log(msg1.toFixed(2));

  const msg2 = getMsg("hello") as string;
  console.log(msg2.toUpperCase());
})();

(() => {
  const a = document.querySelector('a[href="ch06/ex06-24.js"]');

  if (a !== null) {
    a.textContent += " 클릭";
  }

  // Non-null assertion(!):  TS 문법, 지정한 객체가 null이거나 undefined가 아님을 단언
  a!.textContent += " 클릭";
})();

타입 가드

함수의 매개 변수로 여러 종류의 타입이 지정되었을 경우(유니언 타입) 정확한 타입 추론을 할 수 있도록 TSC에 힌트를 주는 구문

• 주로 조건문을 이용하고, TSC가 조건문의 구문을 인식해서 조건문 내부에서만큼은 적절한 타입으로 추론할 수 있도록 도와주는 문법
• 구문
  • null, undefined 확인
  • 논리 연산자
  • typeof 연산자
  • instanceof 연산자
  • in 연산자
  • 구별된 유니언 타입
    • 타입 별칭이나 인터페이스의 속성 정의 시 구체적인 값을 지정한 후 객체의 속성값으로 확인
  • 타입 가드 함수 작성

(() => {
	// msg의 타입에 따라서 다른 코드를 실행하는 함수
  function print(msg: string | number | string[] | Date) {
    // FIXME string 타입이거나 배열일 경우 msg의 길이를 출력하세요.
    if (typeof msg === "string" || msg instanceof Array) {
      console.log(msg.length);
    }

    // FIXME number 타입일 경우 소수점 2자리까지 출력하세요.
    if (typeof msg === "number") {
      console.log(msg.toFixed(2));
    }
  }

  print(["hello", "world"]);
  print("hello");
  print(123.456);
})();