TypeScript에서 읽기 전용 플래그를 제거하는 방법

이 유형과 인터페이스 또는 readonly 수정자가 있는 클래스를 본 적이 있을 것입니다 👇

interface Immutable {
  readonly name: string;
  readonly age: number;
  // so harsh
  readonly alive: boolean;
}

type Meme = {
  readonly funny: boolean;
}

class Test {
  constructor(public readonly name: string, public readonly age: number) {
    this.name = name;
    this.age = age;
  }
}

이제 Immutable 인터페이스의 모양(또는 유형)에 따라 개체를 정의하면 평소처럼 속성 값을 변경할 수 없습니다.

interface Immutable {
  readonly name: string;
  readonly age: number;
  readonly alive: boolean;
}

let person: Immutable = {
  age: 24,
  name: "daniel",
  alive: true // it's a matter of prespective
}

person.name = "Nigel";

이것이 우리가 원하는 것입니다. 실제로 이것은 readonly이 되기를 원하는 정상적인 동작이지만 문제는 readonly 속성을 변경하는 방법을 작성하거나 더 잘 말할 수 있는 방법입니다.

여기서 인덱스 액세스 유형의 도움으로 Improve control over mapped type modifiers을 사용할 수 있습니다.

다음은 마지막 예제에서 readonly 수정자를 제거하는 방법입니다.

interface Immutable {
  readonly name: string;
  readonly age: number;
  readonly alive: boolean;
}

let person: Immutable = {
  age: 24,
  name: "daniel",
  alive: true // it's a matter of prespective
}

person.name = "Nigel";


type Mutable = {
  -readonly [key in keyof Immutable]: Immutable[key];
}

let mut: Mutable = person;
// this is crazy
mut.name = "somethnig else";

그림에서 볼 수 있듯이 Mutable 이라는 또 다른 유형을 정의합니다.
그런 다음 매핑된 유형 및 keyof 연산자가 있는 모든 readonly 키에서 -readonly 수정자(마이너스 - 있음)의 도움으로 Immutable 수정자를 제거합니다.

또한 줄 끝에서 인덱스 액세스 유형의 도움으로 모든 Immutable 유형(이 경우 string , number , boolean )을 추가합니다.

따라서 이 예는 의도적이며 누군가 처음에 Immutable 모양의 개체를 생성할 필요가 없다고 생각합니다. 이 경우에는 perons 개체인 다음 다시 mut 유형의 새 변수 Mutable에 추가합니다.

그러나 Mutable 유형이 실제로 readonly 유형을 제거한다는 것을 보여줍니다. 정말 멋져요🤩

또한 class 으로 동일한 작업을 수행할 수 있습니다. 여기에 예가 있습니다 👇

class Test {
  constructor(public readonly name: string, public readonly age: number) {
    this.name = name;
    this.age = age;
  }
}

let newTest = new Test("daniel", 23);
newTest.name = "something" // not possible
newTest.age = 100; // also not possible

type RemoveReadonly = {
  -readonly [key in keyof Test]: Test[key];
}

let removeReadonly: RemoveReadonly = newTest;
removeReadonly.name = "now i can do that";
removeReadonly.age = 100;

도움이 되었기를 바랍니다. 🤗

원본 게시물: https://danielcodex.com/2022/05/17/how-to-remove-the-readonly-modifier-in-typescript/