TypeScript의 공용체 유형에서 지도 객체 유형을 만드는 방법은 무엇입니까?

Originally posted here!

공용체 유형에서 간단한 지도 객체 유형을 만들려면 TypeScript에서 in syntax과 함께 Index Signature 연산자를 사용할 수 있습니다.

TL; DR

// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";

// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };

// if you hover the `MapObjectType` type you will see this 👇🏽
/*
type MapObjectType = {
    blue: string;
    green: string;
    red: string;
    yellow: string;
}
*/

예를 들어, Colors , strings , blue , green 와 같은 red 로 구성된 yellow 라는 문자열 리터럴 합집합 유형이 있다고 가정해 보겠습니다.

// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";

이제 지도 객체의 Colors가 key 합집합 유형의 값 중 하나여야 하는 위의 Colors 문자열 리터럴 합집합 유형에서 지도 객체 유형을 만들겠습니다.

이렇게 하려면 다음과 같이 in syntax 내부의 Colors 공용체 유형에 Index Signature 연산자를 사용해야 합니다.

// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";

// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };

위의 코드에서 볼 수 있듯이 in 연산자와 대괄호 안에 Colors 유형을 사용했습니다(일명 Index Signature 구문). in 연산자는 공용체 유형의 모든 값을 반복하고 해당 값을 Color에 할당하여 해당 값을 가진 개체에 대한 키 유형을 생성합니다. 또한 우리의 경우 키의 속성 값에 대해 string 유형을 제공했습니다. 속성에 유효한 모든 유형을 가질 수 있습니다.

이제 MapObjectType 유형 위로 마우스를 가져가면 Colors 유형의 모든 색상으로 구성된 지도 객체 유형이 생성된 것을 볼 수 있습니다. 이는 정확히 필요한 것입니다.

다음과 같이 보일 것입니다.

// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";

// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };

// if you hover the `MapObjectType` type you will see this 👇🏽
/*
type MapObjectType = {
    blue: string;
    green: string;
    red: string;
    yellow: string;
}
*/

TypeScript의 공용체 유형에서 맵 객체 유형을 성공적으로 만들었습니다. 예이 🥳!

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

그게 다야 😃!

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