TypeScript의 유형 별칭 또는 인터페이스의 모든 속성에서 공용체 유형을 만드는 방법은 무엇입니까?

Originally posted here!
type alias 또는 interface 유형의 모든 속성에서 공용체 유형을 만들려면 indexed access type syntax 을 사용한 다음 keyof 유형 연산자와 interface 또는 type alias TypeScript에서.

TL;DR

// a simple interface
interface Car {
  name: string;
  yearMade: number;
  isSuv: boolean;
}

// make union type from all the
// properties from the `Car` interface
type CarProps = Car[keyof Car]; // CarProps -> string | number | boolean

예를 들어, Car 유형의 name 속성이 있는 string 인터페이스, yearMade 유형의 number 속성, isSuv 속성이 있다고 가정해 보겠습니다. 이와 같은 boolean 유형,

// a simple interface
interface Car {
  name: string;
  yearMade: number;
  isSuv: boolean;
}

Car 인터페이스의 모든 속성에서 공용체 유형을 만들고 싶다고 가정합니다.

그렇게 하려면 indexed access type 구문을 사용한 다음 keyof 유형 연산자를 사용하고 그 뒤에 통합 유형을 만들어야 하는 interface 이름을 사용할 수 있습니다. 우리의 경우 Car 인터페이스입니다.

이런식으로 할 수 있는데,

// a simple interface
interface Car {
  name: string;
  yearMade: number;
  isSuv: boolean;
}

// make union type from all the
// properties from the `Car` interface
type CarProps = Car[keyof Car]; // CarProps -> string | number | boolean

이제 CarProps 유형 위로 마우스를 가져가면 string , number 및 boolean 유형으로 구성된 공용체 유형임을 알 수 있습니다. 이는 Car의 속성 유형과 동일합니다. ) 상호 작용.

인터페이스의 모든 속성에서 공용체 유형을 성공적으로 만들었습니다. 야 🥳!

이 방법은 TypeScript의 type alias 유형에 사용할 수 있습니다.

codesandbox 에 있는 위의 코드를 참조하세요.

그게 다야 😃!

😃 유용하셨다면 공유해 주세요.