Typescript의 객체 인덱스 서명 키 유형에서 통합 유형을 만드는 방법은 무엇입니까?

Originally posted here!

개체index signature 키로 공용체 유형을 만들려면 TypeScript에서 keyof 연산자 다음에 색인 서명 이름을 사용할 수 있습니다.

TL;DR

// `Person` index signature
type Person = {
  [key: string]: number;
};

// make union type from the `Person`
// index signature key type
type PersonKeys = keyof Person; // string | number

// use the `PersonKeys` union type on variables
const a: PersonKeys = "Hello"; // ✅ Valid.
const b: PersonKeys = 3; // ✅ Valid.
const c: PersonKeys = true; // ❌ Not Valid. Since it doesn't comply with `PersonKeys` union type

예를 들어, 키가 Person 유형이고 string가 value 유형인 경우 number라는 객체의 인덱스 서명이 있다고 가정해 보겠습니다.

// Person index signature
type Person = {
  [key: string]: number;
};

참고: TypeScript의 index signatures에 대한 자세한 내용은 Which type to use for objects when properties are not known ahead of time in TypeScript?의 블로그를 참조하십시오.
Person 라는 인덱스 서명을 정의했으므로 인덱스 서명 이름 뒤에 keyof 연산자를 사용하여 인덱스 서명 키 유형에서 통합 유형을 생성해 보겠습니다.

이런식으로 할 수 있는데,

// `Person` index signature
type Person = {
  [key: string]: number;
};

// make union type from the `Person`
// index signature key type
type PersonKeys = keyof Person; // string | number

위의 코드에서 볼 수 있듯이 PersonKeys는 이제 string and number 두 유형으로 구성된 공용체 유형입니다.

또한 인덱스 서명의 모든 키에 대해 string 유형만 사용했지만 공용체 유형이 string 및 number 유형으로 구성되어 있음을 알 수 있습니다. 이는 string 유형이 a이기 때문입니다. string 및 number 유형의 상위 집합입니다.

이제 변수에 PersonKeys 공용체 유형을 사용하여 작동하는지 확인하겠습니다.

이런식으로 할 수 있는데,

// `Person` index signature
type Person = {
  [key: string]: number;
};

// make union type from the `Person`
// index signature key type
type PersonKeys = keyof Person; // string | number

// use the `PersonKeys` union type on variables
const a: PersonKeys = "Hello"; // ✅ Valid.
const b: PersonKeys = 3; // ✅ Valid.
const c: PersonKeys = true; // ❌ Not Valid. Since it doesn't comply with the `PersonKeys` union type

보시다시피 처음 2개의 변수는 공용체 유형PersonKeys을 만족하므로 모두 유효하고 마지막 변수는 공용체 유형PersonKeys을 충족하지 않으므로 유효하지 않습니다.

야 🥳! TypeScript의 객체 인덱스 서명 키 유형에서 통합 유형을 성공적으로 만들었습니다.

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

그게 다야 😃!

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