인프런 한입크기로 잘라먹는 타입스크립트 - 이정환님의 강의를 보고
내용을 정리한 포스팅입니다

🥇 타입좁히기

조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법
어떤 변수가 특정 조건 내에서 좁은 타입임을 보장할 수 있음 때에는 더 좁은타임으로 추론해줍니다.

// value 타입에 따라 메소드 다르게 적용시키기
// value => number : toFixed()
// value => string : toUpperCase()
function func(value: number | string) {
  value;
  value.toUpperCase(); // 오류가 출력됩니다.
  value.toFixed();// 오류가 출력됩니다.

  if (typeof value === "number") { // 타입가드 (타입을 한정짓게해줌)
    console.log(value.toFixed()); // 넘버타입으로 추론
  } else if (typeof value === "string") { // 타입가드 (타입을 한정짓게해줌)
    console.log(value.toUpperCase()); // 스트링 타입으로 추론
  }
}

🥈 타입 가드1

특정한 조건내에서 타입을 한정 짓게 해줍니다

// value => Date : getTime
function func(value: number | string | Date | null) {
  if (typeof value === "number") {
    // 타입가드 (타입을 한정짓게해줌)
    console.log(value.toFixed()); // 넘버타입으로 추론
  } else if (typeof value === "string") {
    // 타입가드 (타입을 한정짓게해줌)
    console.log(value.toUpperCase()); // 스트링 타입으로 추론
  } else if (typeof value === "object") { // Date 가 객체이기 때문에 obeject 로 적어줍니다.
    console.log(value.getTime()); // null 이 추가됬을 경우 오류가 나옵니다
    // object 가 null 일 수도 있기에 나오는 오류입니다.
    // 그렇기에 다른 방법인 아래 instanceof 를 사용합니다
  }
}

🥈 타입가드2

typeof 가 아닌 instanceof , in 을 사용해야 하는 경우

🥉 instanceof 가 아닌 in 사용 해야 하는 경우

• instanceof 연산자는 JavaScript에서 특정 객체가 어떤 클래스의 인스턴스인지 확인할 때 사용됩니다. JavaScript 내장 객체인 Date는 instanceof로 확인이 가능합니다.
• Person은 사용자 정의 타입이므로 이 코드만 보고는 Person이 어떤 타입인지 파악할 수 없습니다. 만약 Person이 클래스로 선언되었다면 instanceof 연산자를 사용하여 타입 가드를 할 수 있습니다.

// value => Date : getTime
// value => Person : name 은 age살입니다
function func(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()); // tpyeof 를 사용했을때 null타입 을 추가할 경우 오류가 나옵니다
    // } else if (value instanceof Person) { typeof Person 을 사용할 경우 오류가 출력됩니다
  } else if (value && "age" in value) {
    // in연산자 뒤에는 null,undefined가 들어오면안됩니다
    // 해결 하기 위해 value &&  를 앞에 붙여주고 value가 null 아님 알려줍니다
    console.log(`${value.name}은 ${value.age}살입니다`);
  }
}

🥇 자바스크립트 타입 가드의 종류

JavaScript에는 여러 종류의 타입 가드가 있는데, 그 중에서 typeof, instanceof 그리고 in 이 있습니다.

typeof 연산자: 이 연산자는 변수의 데이터 타입을 반환합니다. 사용 가능한 값은 "undefined", "object", "boolean", "number", "string", "function", "symbol", "bigint" 등입니다. typeof는 주로 기본 데이터 타입을 확인할 때 사용되며, 객체의 구체적인 타입을 확인하는 데는 한계가 있습니다. typeof null이 "object"를 반환하는 것이 그 예입니다. typeof는 또한 변수가 선언되었는지 확인하는 데도 사용됩니다.

instanceof 연산자: 이 연산자는 주어진 객체가 특정 클래스의 인스턴스인지 확인하는데 사용됩니다. 즉, 생성자의 프로토타입이 객체의 프로토타입 체인 어딘가에 존재하는지 확인합니다. 이는 객체지향 프로그래밍에서 객체의 타입을 확인할 때 특히 유용합니다.

in 연산자: 이 연산자는 객체가 특정 속성을 가지고 있는지 확인하는데 사용됩니다. 주어진 문자열이나 심볼 키가 객체의 속성 중 하나인 경우 true를 반환합니다. 이 연산자는 객체의 속성을 검사할 때 주로 사용되며, 특히 속성의 존재 여부를 확인하는데 유용합니다.

이렇게 typeof, instanceof, in 연산자는 각기 다른 목적으로 사용되며, 이는 JavaScript의 동적 타입 특성 때문에 필요합니다. 이러한 연산자들을 적절히 조합하면 더욱 견고한 코드를 작성할 수 있습니다.