[TS] TIL, Narrowing

Narrowing을 알기 전에 TypeScript의 유니언 타입부터 알아야될 것 같다.

Union Type

값에 허용되는 타입을 두 개 이상의 가능한 타입으로 확장하는 것

type Person = {
   name: string;
   phone: number | string;
};

위에서 phone: number | string처럼 하나의 값이 여러 타입 중 하나가 될 수 있을 때 유니언 타입이라고 한다.

 

 

유니언 타입으로 선언된 값은 타입이 명확하지 않다. 
그래서 특정 타입에만 존재하는 속성이나 메서드에 접근하려면 Narrowing을 통해 타입을 좁혀나가야 한다. 코드 흐름이나 조건문 등을 통해 해당 값이 어떤 타입인지 유추하게끔 해준다. 

이를 위해 타입가드를 사용한다. 

• 타입 가드: Narrowing을 수행할 수 있는 논리적 조건이나 검사 방법을 말한다. 

📌 Narrowing의 종류

값 할당을 통한 Narrowing

변수에 값을 직접 할당하면 TypeScript는 그 값을 기반으로 타입을 좁혀나간다. 

let name: string | boolean = 'King';

처음 선언할 땐 string혹은 boolean인 타입이 지정된다. 하지만 'King'이라는 stirng값이 할당되면서 Narrowing 되어 타입이 string이 된다. 

// // 🚨 x가 뭐가 될지 정확한 값을 알 수 없기 때문에 오류가 발생하다. => 명확하지 않아서 에러가 발생하지 않는다.
let x: string | undefined = Math.random() > 0.5 ? "str" : undefined;
let y: string | number = x;


// // ✅ 오류 X , 현재 string 타입이기 때문에 오류가 발생하지 않는다.
// let x: string | undefined = "ㄴㄴ";
// let y: string | number = x; // 이미 할당되면서 string으로 Narrowing가 되었으므로 에러가 발생하지 않는다.

typeof 검사를 통한 Narrowing

typeof를 사용하여 런타임 시 타입을 확인하고, 조건문 내부에서 Narrowing이 발생한다.

let x: string | undefined = Math.random() > 0.5 ? "str" : undefined;
let y: string | number | undefined = x;

//  타입 네로잉
let z: string;

if (typeof x === "string") z = x;

typeof 연산자를 사용하여 변수의 타입을 확인하고 타입을 좁힌다.

조건 검사를 통한 Narrowing

const str: false | string= Math.random() > 0.5 ? null : ['O', 'X'];

if (str) {
    str; // string으로 Narrowing된다.
} else {
    str; // false으로 Narrowing된다.
}

 

단 , const일 경우엔 값이 고정되어 있으므로 Narrowing이 확실히 일어나지만, let으로 선언이 되면 값이 바뀔 수 있기 때문에 좁혀지지 않는 경우도 있다. 

let str: false | string = "hi";
if (str) {
    // TypeScript는 여전히 str을 false | string으로 봄
}

그 외 Narrowing 방법

• in operator
  특정 속성이 객체 안에 존재하는지를 통해 타입을 좁힌다.
• instanceof 연산자
  특정 클래스의 인스턴스인지 검사하여 타입을 좁힌다. 
• 사용자 정의 타입 가이드
  함수로 타입 판별 로직을 작성하여 좁히는 방식이다.