타입스크립트에서 접근 수정자(public, private, protected)는 어떻게 작동합니까? 상속 및 JavaScript로 코드 변환 시 사용 시 주의할 점은 무엇입니까?

답변

타입스크립트에서 접근 수정자는 클래스의 속성과 메소드의 가시성을 제한하는 데 사용됩니다:

• public — 속성 또는 메소드는 어디서나 접근 가능(기본값).
• private — 선언된 클래스 내에서만 접근 가능.
• protected — 클래스 및 그 상속 클래스에서 접근 가능.

class Animal {
  public name: string;
  private age: number;
  protected kind: string;

  constructor(name: string, age: number, kind: string) {
    this.name = name;
    this.age = age;
    this.kind = kind;
  }
}

class Dog extends Animal {
  bark() {
    console.log(this.kind); // OK: protected
    // console.log(this.age); // 오류: 상속 클래스에서 private는 보이지 않음
  }
}

const dog = new Dog('샤릭', 5, '포유류');
console.log(dog.name); // OK
// console.log(dog.kind); // 오류: protected
// console.log(dog.age); // 오류: private

주의할 점:

• 컴파일된 JavaScript에서 private 및 protected 수정자는 컴파일 단계에서만 구현되며, 런타임에 물리적인 분리가 없습니다! JS 코드는 모든 속성을 포함하게 되며(예: 객체를 통한 탐색으로 얻을 수 있음).
• 최신 버전(타입스크립트 3.8부터)에서는 진짜 private 필드를 위한 구문이 도입되었습니다: #field, 하지만 이것은 JS의 사양이며 다르게 컴파일됩니다.

속임수가 포함된 질문

질문: 타입스크립트 클래스의 private 속성에 JavaScript로 컴파일한 후 접근할 수 있습니까?

답변: 예, private(및 protected)는 타입스크립트의 컴파일 단계에서의 검사이기 때문에, ES5 또는 ES6로 컴파일된 후에는 프라이버시가 유지되지 않고, 속성은 객체에 남아 있으며 속성 이름을 통해 접근할 수 있습니다(예: object['privateProp'] 사용).

// 컴파일된 JS 코드
function Animal(name, age, kind) {
  this.name = name;
  this.age = age;
  this.kind = kind;
}
var dog = new Animal('샤릭', 5, '포유류');
console.log(dog['age']); // 5 — TS 수준에서만 접근 불가!

주제에 대한 세부 사항을 모르는 경우 발생할 수 있는 실제 오류 사례.

---

이야기

대형 프로젝트에서 개발자는 런타임에서 private 필드의 접근 불가능성을 신뢰했습니다. 결과적으로 객체를 직렬화(JSON.stringify)하여 전송할 때 우연히 기밀 데이터가 로그에 포함되었습니다. TS의 타입 검사가 실제 접근으로부터 보호하지 못한 것입니다.

---

이야기

프로젝트에서는 동적으로 속성을 추가하여 클래스 인스턴스를 "확장"하는 메커니즘이 구현되었습니다. 동적으로 추가된 속성이 private 이름을 덮어쓰게 되었고 외부 코드에 의해 우연히 수정되었습니다. 이 오류는 production에서만 발견되었으며, 프라이버시가 보장되지 않았습니다.

---

이야기

JavaScript에서 타입스크립트로 마이그레이션하는 과정에서 팀은 protected를 사용하기 시작했으며, 이는 자식 클래스 외부에서 필드 사용을 방지한다고 믿었습니다. 그러나 프로그래머가 Object.assign을 통해 보호된 필드를 런타임에서 실수로 덮어쓰게 되어 추적하기 어려운 버그가 발생했습니다. 이는 런타임 캡슐화가 없기 때문에 가능했습니다.