[TypeScript] Narrowing

타입스크립트는 자바스크립트보다 강력한 타입 시스템을 가지고 있다. 이것은 개발자가 코드에서 사용되는 값의 타입을 명확하게 지정할 수 있다는 것을 의미한다. 그러나 때로는 값의 타입이 불명확할 수 있다. 이 때, 타입스크립트는 Narrowing이라는 개념을 사용하여 값의 타입을 더욱 명확하게 할 수 있다.

 

---

◆ Narrowing

Narrowing이란, 값의 타입을 좁히거나 제한하는 것을 말한다. Narrowing은 값의 타입을 추론하여 더욱 명확하게 만든다. 다음은 Narrowing의 예시.

function printId(id: number | string) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

위의 코드에서, id 변수의 타입은 number 또는 string일 수 있다. 하지만 typeof id를 사용하여 id의 타입을 확인하고, string 타입인 경우 toUpperCase() 메소드를 사용할 수 있다. 이렇게 Narrowing이 사용되면, 개발자가 코드에서 값을 더욱 확실하게 다룰 수 있다.

 

 

◆ in 연산자를 이용한 Narrowing

타입스크립트에서 in 연산자를 사용하여 객체의 속성의 존재 여부를 확인할 수 있다. 이를 활용하여 Narrowing을 할 수 있다.

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape) {
  if ('radius' in shape) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.sideLength ** 2;
  }
}

위의 코드에서 shape의 타입은 Circle 또는 Square일 수 있다. in 연산자를 사용하여 shape가 Circle일 경우, radius 속성에 접근하여 원의 넓이를 계산할 수 있다. 이렇게 Narrowing을 사용하면, 개발자가 코드를 더욱 명확하게 작성할 수 있다.

 

Narrowing은 타입스크립트에서 중요한 개념 중 하나이다. Narrowing을 사용하면, 개발자가 코드에서 값을 더욱 확실하게 다룰 수 있다. typeof 연산자와 in 연산자를 활용하여 Narrowing을 할 수 있으며, 이를 통해 코드를 더욱 명확하게 작성할 수 있다.