TypeScript에서 공용체 유형이 있는 객체의 속성과 메서드를 좁히기 위해 'in' 연산자를 사용하는 방법은 무엇입니까?

Originally posted here!

공용체 유형이 있는 객체의 속성과 메서드를 좁히기 위해 TypeScript에서 in 연산자를 사용할 수 있습니다.

TL;DR

// Editor type
type Editor = {
  name: string;
};

// Admin type
type Admin = {
  name: string;
  role: string;
};

// function with parameter of user with
// union type composed of `Editor` and `Admin` type
function showRole(user: Editor | Admin) {
  // use the `in` operator to narrow down to the `Admin` type
  // since "role" property only exists in `Admin` type
  if ("role" in user) {
    console.log(user.role);
  } else {
    console.log("No user roles assigned");
  }
}

예를 들어, Editor라는 속성을 가진 name라는 유형이 string라는 유형을 만들고, Admin라는 유형과 name라는 유형을 가진 role라는 유형을 이렇게 만들어 봅시다.

// Editor type
type Editor = {
  name: string;
};

// Admin type
type Admin = {
  name: string;
  role: string;
};

이제 string 및 showRole 유형으로 구성된 공용체 유형을 사용하여 user의 매개변수가 있는 Editor라는 함수를 만들어 봅시다.

다음과 같이 보일 수 있습니다.

// Editor type
type Editor = {
  name: string;
};

// Admin type
type Admin = {
  name: string;
  role: string;
};

// function with parameter of user with
// union type composed of `Editor` and `Admin` type
function showRole(user: Editor | Admin) {
  // cool code here... 🥳
}

이제 위 함수의 목적은 함수 매개변수로 전달될 사용자의 역할을 콘솔에 표시하는 것입니다.

따라서 Admin 변수에서 role 속성에 액세스해 보겠습니다.

다음과 같이 할 수 있습니다.

// Editor type
type Editor = {
  name: string;
};

// Admin type
type Admin = {
  name: string;
  role: string;
};

// function with parameter of user with
// union type composed of `Editor` and `Admin` type
function showRole(user: Editor | Admin) {
  // this will be an error ❌ 🤯.
  console.log(user.role); // Property 'role' does not exist on type 'Editor | Admin'.
}

user 개체 변수에서 role 속성에 액세스하려고 하면 TypeScript 컴파일러에서 user라는 오류가 표시됩니다.

TypeScript는 Property 'role' does not exist on type 'Editor | Admin'. 속성에 액세스할 때 user 객체 변수에 사용할 유형을 모르기 때문입니다. role 개체 변수가 user 및 Editor 유형과 합집합 유형을 가지고 있고 여기서 사용해야 할 유형을 제대로 좁히지 않았기 때문에 발생하는 오류입니다.

올바른 유형으로 범위를 좁히려면 Admin 연산자를 사용하십시오. in 연산자는 지정된 개체에 속성이나 메서드가 있는지 확인합니다.

in 유형에만 존재하는 role 속성을 표시해야 하므로 Admin 연산자를 사용하여 주어진 개체에 in 속성이 존재하는지 확인할 수 있습니다.

다음과 같이 할 수 있습니다.

// Editor type
type Editor = {
  name: string;
};

// Admin type
type Admin = {
  name: string;
  role: string;
};

// function with parameter of user with
// union type composed of `Editor` and `Admin` type
function showRole(user: Editor | Admin) {
  // use the `in` operator to narrow down to the `Admin` type
  // since "role" property only exists in `Admin` type
  if ("role" in user) {
    console.log(user.role);
  } else {
    console.log("No user roles assigned");
  }
}

이제 role 블록 내에서 if 유형의 모든 속성과 메서드에 액세스할 수 있으며 TypeScript 컴파일러는 우리가 원하는 오류를 표시하지 않습니다. 🥳

codesandbox에 있는 위의 코드를 참조하십시오.

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.