TypeScript에서 다른 객체 유형 키의 객체 유형을 만드는 방법은 무엇입니까?

Originally posted here!

다른 객체 유형 키에서 객체 유형을 만들려면 TypeScript에서 in 내부의 keyof 연산자와 함께 Index Signature syntax 연산자를 사용할 수 있습니다.

TL; DR

// a simple type
type Person = {
  name: string;
  age: number;
  isAdmin: boolean;
};

// make another object type from
// the `Person` type key's using the
// `in` and the `keyof` operator
// inside the `Index Signature` syntax
type AllPropertyStringPerson = {
  [Value in keyof Person]: string;
};

/*
The `AllPropertyStringPerson` type content looks like this,

{
  name: string;
  age: string;
  isAdmin: string;
}

*/

예를 들어 Person , name 및 age 와 같은 일부 속성이 있는 isAdmin 라는 유형이 있고 각각 string , number 및 부울 유형이 있다고 가정해 보겠습니다.

// a simple type
type Person = {
  name: string;
  age: number;
  isAdmin: boolean;
};

이제 우리는 Person 유형의 키를 사용하지만 string 새 유형의 각 키에 대해 다른 유형을 사용하여 다른 객체 유형을 만드는 것을 목표로 합니다.

이를 위해 다음과 같이 in 연산자와 Index Signature syntax 내부의 keyof 연산자를 사용할 수 있습니다.

// a simple type
type Person = {
  name: string;
  age: number;
  isAdmin: boolean;
};

// make another object type from
// the `Person` type key's using the
// `in` and the `keyof` operator
// inside the `Index Signature` syntax
type AllPropertyStringPerson = {
  [Value in keyof Person]: string;
};

위의 코드에서 볼 수 있듯이 많은 일이 진행되고 있습니다. 위 코드에 대한 설명은 다음과 같습니다.

in 유형

의 모든 속성을 반복해야 하기 때문에 Person 연산자를 사용했습니다.

또한 루핑하는 동안 키의 이름만 가져와야 하며 이를 위해 keyof 연산자와 키 이름을 가져오는 데 필요한 유형을 사용했습니다. 이 경우에는 Person 유형입니다.

그러면 키 이름 값이 Value 안에 지정한 Index Signature syntax 자리 표시자 이름 안에 저장됩니다.

마지막으로 새 유형string의 모든 속성에 대해 AllPropertyStringPerson 유형을 지정했습니다.

이제 AllPropertyStringPerson 위로 마우스를 가져가면(VScode 또는 TypeScript 지원 편집기를 사용하는 경우) Person 개체의 모든 키가 AllPropertyStringPerson 유형에 반영되고 모든 속성이 다음 유형을 갖는 것을 볼 수 있습니다. 문자열의.

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

// a simple type
type Person = {
  name: string;
  age: number;
  isAdmin: boolean;
};

// make another object type from
// the `Person` type key's using the
// `in` and the `keyof` operator
// inside the `Index Signature` syntax
type AllPropertyStringPerson = {
  [Value in keyof Person]: string;
};

/*
The `AllPropertyStringPerson` type content looks like this,

{
  name: string;
  age: string;
  isAdmin: string;
}

*/

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

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

그게 다야 😃!

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