[TS] 타입 가드 & 타입 내로잉(is, as const, keyof, typeof, as)

앞에 Type Narrowing에 대해 정리했지만 타입 가드를 들었을 때 둘이 같은거라고 생각했다. 하지만 약간의 차이가 있고 알고보면 완전히 다른 것이라는 것을 알 수 있다. 예를 들어서 설명하는 것이 쉽다. 

const value: unknown = "hello";

if (typeof value === "string") { // 타입 가드 사용 !
  console.log(value.toUpperCase()); // 이렇게 타입 가드후 타입 내로잉을 거친다. 
}

unknown을 예로 들어 설명하면 쉽다. unknown은 any와 함께 최상위 타입에 속한다. 그 말은 즉 타입이 구체적이지 않고 추상적이라는 말이다. 

여기서 최상위 타입이란?
모든 타입이 할당 가능한 타입을 의미한다. ➡️ 즉 타입이 매우 추상적이고 구체적인 정보가 없다.(안좋은거임)

 

이런 경우엔 타입을 좁히는 작업(Narrowing)이 필요하다.

위 코드처럼 if (typeof value === "string") 과 같은 조건을 통해 타입을 판별하는 구문을 Type Guard라고 부른다.
그리고 해당 조건 안에 진입한 시점부터 타입스크립트는 value를 string으로 자동으로 좁혀준다.
이 과정을 Type Narrowing(타입 좁히기)라고 한다.

 

그래서 타입 가드가 있다면 타입 네로잉이 거의 항상 동반한다고 볼 수 있다.

 

[참고]

• instanceof는 클래스를 기반으로 생성된 객체인지를 검사할 때 사용한다.

📌 is : type predicate = user-defined type guard

사용자정의 타입가드는 boolean값을 반환하고 Return type으로 value is type을 지정해주는 함수를 의미한다. 

const isString = (value: unknown): value is string => 
  typeof value === 'string';

리턴이 true이면 value 너는 이제 string이야 ! 하는 의미이다 . 

//error 가 IErrorWithMessage 타입인지 검사하고 narrowing -> 초기 리턴값은 불리언
// 이 함수가 true라고 리턴하는 순간부터 타입스크립트는 error를 IErrorWithMessage라는 타입으로 인식한다.
const isErrorWithMessage = (error: unknown): error is IErrorWithMessage =>
  typeof error === "object" &&
  error !== null &&
  "message" in error &&
  typeof error.message === "string";

isErrorWithMessage가 true를 리턴하는 순간,  타입스크립트에게 error 는 이제 ErrorWithMessage 야 !! 라고 선언하는 셈이다.

---

📌 typeof

제공되는 값의 타입을 반환한다. ➡️ 실제 객체를 타입으로 변환

📌 keyof

존재하는 타입의 키를 바탕으로 유니언 타입을 생성한다.

유니온 타입 ? 여러 타입중 하나일 수 있다!!

const hello = {
  name: "hong",
  age: 12,
  hobby: "running",
};

type typeHello = keyof hello; // 객체 타입의 프로퍼티 key로 구성된다. "name"|"age"|"hobby"로 구성

📌 keyof  typeof

제공되는 값에 존재하는 키만 매개변수의 타입으로 허용하고 싶을 때 사용하면 된다. 

const hello = {
  name: "hong",
  age: 12,
  hobby: "running",
};

type typeHello = keyof typeof hello;

위 코드의 type

⭐️ keyof, typeof 정리

객체 key를 상수 타입으로 

const fruitCode = {
  apple: 'APL',
  banana: 'BNN',
  orange: 'ORG', 
} as const; // 리터럴 타입으로 고정

// 1.typeof로 실제 객체를 객체 타입으로 변환
// 2. keyof로 변환된 객체 타입의 key를 유니온 타입으로 변환해준다. 
type Fruit = keyof typeof fruitCode;  // "apple" | "banana" | "orange"

객체 key의 값을 상수 타입으로 

const fruitCode = {
  apple: 'APL',
  banana: 'BNN',
  orange: 'ORG', 
} as const; // 리터럴 타입으로 고정

type Fruit = typeof fruitCode[keyof typeof fruitCode] // "APL"|"BNN"|"ORG"

 

---

AS , Type Assertion

값의 타입을 개발자가 직접 타입을 단언, 주장하는 것이다. 타입스크립트가 추론한 타입을 덮어씌우는 행위이다.

const value = "hello" as string;

➡️ 타입스크립트가 타입을 추론을 하지 못하는 경우 사용한다. (내가 더 정확히 알고, 안전할 경우만사용, 최대한 쓰지 않는 것이 좋다 !)

 

‼️ 아래와 같이 쓰면, 런타임 중에 에러가 발생할 수 있다.

const num = "123" as unknown as number;