타입스크립트 in 연산자 타입 가드 예제

타입스크립트(Typescript)의 in 연산자는 타입 가드이며, 객체에 특정 속성이 존재하는지를 확인한다.

`in 연산자`는 일반적으로 `"속성명" in 객체`와 같은 개념으로 동작한다.

`in 연산자`를 조건문 안에서 사용하면, 타입스크립트가 해당 속성을 가진 타입으로 객체의 범위를 좁히는 타입 내로잉(Type Narrowing)을 수행한다.

타입이 서로 다른 고유 속성을 가지고 있다면,
특정 속성의 존재 여부를 검사하여
현재 값이 어떤 타입인지 안전하게 판단할 수 있다.

한 객체에는 관리자 전용 속성이 있고,
다른 객체에는 일반 사용자 전용 속성이 있다면,
`in 연산자`를 통해 해당 속성의 존재 여부를 확인한 뒤
각각의 타입에 맞는 속성이나 기능을 사용할 수 있다.

`in 연산자` 타입 가드의 장점은 별도의 형 변환이나 강제적인 타입 단언 없이 객체 구조를 기준으로 타입을 판별할 수 있다는 점이다.

이를 통해 존재하지 않는 속성에 접근하면서 발생할 수 있는 타입 오류를 줄이고 코드의 안정성과 가독성을 높일 수 있다.

`in 연산자`는 속성의 값이 무엇인지 확인하는 것이 아니라 해당 속성 이름이 객체 또는 객체의 프로토타입 체인에 존재하는지를 검사한다.

`타입스크립트의 in 연산자 타입 가드`는 여러 객체 타입 중 특정 속성의 존재 여부를 기준으로 실제 타입을 좁혀 안전하게 처리하기 위한 방법이다.

⊙

type User = {
  name: string;
};

type Admin = {
  name: string;
  permissions: string[];
};

function printInfo(person: User | Admin) {
  console.log(person.permissions);
}

⊙

if ("permissions" in person) {
  console.log(person.permissions);
}

⊙

"프로퍼티명" in 객체

⊙

const user = {
  name: "Kim",
  age: 20,
};

console.log("name" in user); // true
console.log("email" in user); // false

⊙

string | number

⊙

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

⊙

type Dog = {
  bark: () => void;
};

type Cat = {
  meow: () => void;
};

⊙

function makeSound(animal: Dog | Cat) {
  // animal.bark();
}

⊙

function makeSound(animal: Dog | Cat) {
  if ("bark" in animal) {
    animal.bark();
  } else {
    animal.meow();
  }
}

⊙

animal
↓
Dog | Cat
↓
"bark" in animal
↓
Dog

⊙

type Success = {
  data: string;
};

type Failure = {
  error: string;
};

function handle(result: Success | Failure) {
  console.log(result.data);
}

⊙

function handle(result: Success | Failure) {
  if ("data" in result) {
    console.log(result.data);
  } else {
    console.log(result.error);
  }
}