[TypeScript] 타입 좁히기

🎯 타입 좁히기

조건문 등을 이용해 넓은 타입 -> 좁은 타입
즉, 상황에 따라 타입을 좁힌다는 뜻

function func(value: number | string) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase);
  }
}

• 위 코드에서 처음 value의 타입은 number | string이다.
• 하지만 조건문을 통해 number 타입을 지정해준 이후 아래 사진과 같이 value 타입이 number로 변형된 것을 확인할 수 있다.
  
• toFixed()는 number에서만 사용할 수 있는 메서드이기 때문에,
  해당 블록 안에서는 value가 number로 좁혀진 것을 확인할 수 있다.
• 반대로 typeof value === "string" 조건을 사용하면,
  toUpperCase()를 사용할 수 있으며 이 경우 value는 string으로 좁혀진다.
  
• 이와 같이 타입 좁히기는 타입을 변경하는 것이 아니라, 여러 가능성 중 하나로 확정하는 과정이다.

⚠️ 주의사항

• 만일 조건문이 없이 바로 toFixed나 toUpperCase를 사용한다면 오류 발생

✅ instanceof

• type을 Date으로 주고 싶은데 만일 null도 포함하여 타입을 주게 된다면 오류가 발생
  그리하여 사용되는 것이 instanceof이다.
• 사용 방법 : A instanceof B
• "A는 B객체냐" 라는 뜻

function func2(value: number | string | Date | null) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase);
  } else if (value instanceof Date) {
    console.log(value.getTime());
  }
}

✅ in

• Person이라는 타입을 지정한 이후 instanceof를 사용하고 싶은데 그렇다면 오류가 발생
• 이유는 Date는 자바스크립트에서 제공되는 클래스이지만 Person은 클래스가 아니고 타입 별칭을 가진 객체 타입일 뿐이기 때문
• 이 때 사용 하는 것이 in

type Person = {
  name: string;
  age: number;
};

function func2(value: number | string | Date | null | Person) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase);
  } else if (value instanceof Date) {
    console.log(value.getTime());
  } else if (value && 'age' in value) {
    console.log(`${value.name}은 ${value.age}살입니다.`);
  }
}

• value'age' in value "age라는 프로퍼티가 value에 있냐" 라는 뜻
• in은 null이나 undefined가 올 수 없기 때문에 value &&를 같이 작성해주면 오류가 발생하지 않는다.

---

출처

한 입 크기로 잘라먹는 타입스크립트
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard