TypeScript의 읽기 전용 객체 유형 키에서 변경 가능한 객체 유형을 만드는 방법은 무엇입니까?

Originally posted here!
readonly 객체 유형 키에서 변경 가능한 객체 유형을 만들려면 - 기호(빼기 기호) 다음에 readonly 수정자when making a new object type from another object type keys in TypeScript를 사용할 수 있습니다.

TL; DR

// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};

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

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

*/

예를 들어 모든 속성 키가 다음과 같은 ReadonlyPerson인 readonly라는 유형이 있다고 가정해 보겠습니다.

// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

이제 우리는 모든 속성이 변경 가능하거나 변경될 수 있는 ReadonlyPerson 유형의 모든 속성을 포함하는 새로운 유형을 만드는 것을 목표로 합니다.

이를 위해 읽기 전용- 유형 키에서 새 유형을 생성할 때 readonly 기호(빼기)와 Index Signature syntax 외부의 ReadonlyPerson 키워드를 사용할 수 있습니다. 이렇게 하면 TypeScript 컴파일러가 ReadonlyPerson 유형의 속성을 변경 가능하게 만들 수 있습니다. 여기서 readonly 키워드는 TypeScript에서 수정자라고 합니다.

이렇게 할 수 있습니다.

// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};

위의 코드에서 볼 수 있듯이 다음을 사용했습니다.

-readonly 색인 서명 구문 외부의 한정자. 이렇게 하면 새 유형에서 속성을 변경할 수 있습니다. 그것을 기억하기 위해 나는 머릿속에서 -readonly 구문 문을 remove the readonly modifier for the property 로 읽었습니다. 😅

또한 ReadonlyPerson[Value] 기호(콜론) 다음에 :와 같은 다른 구문을 사용했음을 알 수 있습니다. 이것은 특정 속성의 유형을 가져올 수 있는 Indexed Access Types 구문이라고 하는 TypeScript의 유효한 구문입니다. 우리의 경우 현재 Value를 ReadonlyPerson 유형으로 전달하여 루프되는 현재 유형의 속성을 가져오는 데 이것을 사용하고 있습니다.

이제 MutablePerson 위로 마우스를 가져가면(VScode 또는 TypeScript 지원 편집기를 사용하는 경우) ReadonlyPerson 객체의 모든 키가 MutablePerson 유형에 반영되는 것을 볼 수 있습니다. readonly 수정자가 붙어 있지 않습니다.

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

// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};

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

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

*/

TypeScript의 객체 유형 키readonly에서 변경 가능한 객체 유형을 성공적으로 만들었습니다. 예이 🥳!

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

그게 다야 😃!

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