TypeScript readonly

TypeScript에서 읽기 전용 property를 만들면서 조사한 readonly keyword 내용을 정리해보았다.

생성 방법

• Class 내부에서 property에 설정할 수 있다.
  • interface에서도 설정할 수 있었다.
• 초기화 시점
  • property 선언 혹은 constructor에 값을 할당할 수 있다.
• 중간 변경이 불가능하다. 말 그대로 "읽기 전용"!
• Readonly<> utility type으로 기존 interface를 읽기 전용으로 사용할 수 있다.

(1) class

class Test {
  private readonly prop1: number = 1;
  private readonly prop2: number;
  
  constructor() {
    this.prop2 = 2;
  }
  
  fun() {
    this.prop1 = 3; // Error! read-only property므로 변경이 불가능
  }
}

(2) interface

interface Test {
  readonly prop: number;
}

let test: Test = { prop: 5 };
console.log(test.prop); // 5
test.prop = 3; // Error! read-only property므로 변경이 불가능

// index signature에도 적용 가능
interface Test2 {
  readonly[key: number]: number;
}

let test2: Test2 = { 0: 1, 1: 2 };
console.log(test2[0]); // 1
test2[0] = 3; // Error! read-only property므로 변경이 불가능

(3) Readonly

• 과거 소개했던 Utility types 중 하나이다.

interface Test {
  prop: number;
}

type readonlyTest = Readonly<Test>;

JavaScript에서는 어떻게?
Object.defineProperty로 property 생성할 때 writable property를 false로 준다고 한다.
ex)

var test = {};
Object.defineProperty(test, "prop", {
    // ...
    writable: false
});

readonly vs const

• readonly는 property에 사용하는 것이 목적이다.
• readonly 초기화는 선언 혹은 constructor에서 되는데 const는 선언할 때만 가능하다.

readonly vs getter

• getter도 readonly와 유사하게 사용할 수 있다.
  • typescript accessor syntax로 getter/setter가 있다.
• 차이점
  • 다만 getter는 property가 아니라는 점과,
  • 다른 값을 우회해서 접근할 수 있다는 점이 다르다.

class Test {
  private otherProp: number;
  
  constructor() {
    this.otherProp = 0;
  }
  
  public setValue(value: number) {
    this.otherProp = value;
  }  
  
  get prop(): number {
    return this.otherProp;
  }
}

const test = new Test();
console.log(test.prop);
test.setValue(54);
console.log(test.prop);