TypeScript에서 클래스 필드를 읽기 전용 또는 불변으로 만드는 방법은 무엇입니까?

Originally posted here!

클래스 필드를 읽기 전용 또는 불변으로 만들려면 TypeScript에서 class field 이름 앞에 readonly 한정자 키워드를 사용할 수 있습니다.

TL; DR

// a simple class with 2 fields
// and make the `name` field readonly or immutable
// using the `readonly` modifier keyword before field name
class Person {
  readonly name = "Anonymous";
  age = 1;
}

// create an intance
// of the `Person` class
const person = new Person();

// try to change the value of the `name` field
// this is not allowed ❌.
// Error: Cannot assign to 'name' because it is a read-only property.
person.name = "John";

예를 들어, Person 및 name라는 2개의 필드가 있는 age라는 클래스가 있고 각각 값이 Anonymous 및 1라고 가정해 보겠습니다.

// a simple class with 2 fields
class Person {
  name = "Anonymous";
  age = 1;
}

이 경우 Person 클래스의 인스턴스를 생성한 다음 점 연산자( . )를 사용하여 name 필드를 변경하면 해당 값이 변경됩니다.

다음과 같이 보일 수 있습니다.

// a simple class with 2 fields
class Person {
  name = "Anonymous";
  age = 1;
}

// create an intance
// of the `Person` class
const person = new Person();

// change the value of the `name` field
person.name = "John"; // <- this assignment will change the field value

이제 name 필드를 읽기 전용 또는 불변으로 만들기 위해 다음과 같이 클래스 내부의 필드 이름 앞에 readonly 한정자 키워드를 사용할 수 있습니다.

// a simple class with 2 fields
// and make the `name` field readonly or immutable
// using the `readonly` modifier keyword before the field name
class Person {
  readonly name = "Anonymous";
  age = 1;
}

지금 Person 인스턴스의 필드 값을 변경하려고 하면 Cannot assign to 'name' because it is a read-only property.라는 오류가 표시될 것입니다.

다음과 같이 보일 수 있습니다.

// a simple class with 2 fields
// and make the `name` field readonly or immutable
// using the `readonly` modifier keyword before field name
class Person {
  readonly name = "Anonymous";
  age = 1;
}

// create an intance
// of the `Person` class
const person = new Person();

// try to change the value of the `name` field
// this is not allowed ❌.
// Error: Cannot assign to 'name' because it is a read-only property.
person.name = "John";

TypeScript에서 클래스 필드를 읽기 전용으로 성공적으로 만들었습니다. 예이 🥳.

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

그게 다야 😃!

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