비공개 키워드

TypeScript 의 개인 키워드 는 컴파일 시간 주석입니다. 컴파일러에게 속성은 해당 클래스 내에서만 액세스 할 수 있어야한다고 알려줍니다.

class PrivateKeywordClass {
    private value = 1;
}

const obj = new PrivateKeywordClass();
obj.value // compiler error: Property 'value' is private and only accessible within class 'PrivateKeywordClass'.

그러나 컴파일 시간 검사는 예를 들어 유형 정보를 캐스트하여 쉽게 무시할 수 있습니다.

const obj = new PrivateKeywordClass();
(obj as any).value // no compile error

private키워드는 런타임에 적용되지 않습니다

방출 된 JavaScript

TypeScript를 JavaScript로 컴파일 할 때 private키워드는 간단히 제거됩니다.

class PrivateKeywordClass {
    private value = 1;
}

된다 :

class PrivateKeywordClass {
    constructor() {
        this.value = 1;
    }
}

이를 통해 private키워드가 런타임 보호 기능을 제공하지 않는 이유를 확인할 수 있습니다 . 생성 된 JavaScript에서는 일반 JavaScript 특성 일뿐입니다.

개인 분야

개인 필드 는 속성이 런타임에 개인용으로 유지되도록 합니다 .

class PrivateFieldClass {
    #value = 1;

    getValue() { return this.#value; }
}

const obj = new PrivateFieldClass();

// You can't access '#value' outside of class like this
obj.value === undefined // This is not the field you are looking for.
obj.getValue() === 1 // But the class itself can access the private field!

// Meanwhile, using a private field outside a class is a runtime syntax error:
obj.#value

// While trying to access the private fields of another class is 
// a runtime type error:
class Other {
    #value;

    getValue(obj) {
        return obj.#value // TypeError: Read of private field #value from an object which did not contain the field
    }
}

new Other().getValue(new PrivateKeywordClass());

클래스 외부의 개인 필드를 사용하려고하면 TypeScript에서 컴파일 시간 오류를 출력합니다.

비공개 필드는 JavaScript 제안서 에서 제공되며 일반 JavaScript에서도 작동합니다.

방출 된 JavaScript

당신이 타이프에서 개인 필드를 사용하고 같은 당신의 출력을위한 자바 스크립트의 이전 버전을 대상으로하는 경우 es6또는 es2018, 타이프 라이터는 민간 분야의 런타임 동작을 에뮬레이트 코드를 생성하려고합니다

class PrivateFieldClass {
    constructor() {
        _x.set(this, 1);
    }
}
_x = new WeakMap();

를 타겟팅하는 esnext경우 TypeScript는 개인 필드를 생성합니다.

class PrivateFieldClass {
    constructor() {
        this.#x = 1;
    }
    #x;
}

어느 것을 사용해야합니까?

그것은 당신이 달성하려는 것에 달려 있습니다.

private키워드는 미세 기본이다. TypeScript 개발자가 수년 동안 달성하도록 설계되었으며 성공적으로 사용되었습니다. 기존 코드베이스가있는 경우 개인 필드를 사용하기 위해 모든 코드를 전환 할 필요는 없습니다. esnextTS가 개인 필드에 대해 방출하는 JS가 성능에 영향을 줄 수 있으므로 타겟팅하지 않는 경우 특히 그렇습니다 . 또한 비공개 입력란에는 private키워드 와 다른 미묘하지만 중요한 차이점이 있습니다.

그러나 런타임 개인 정보를 적용해야하거나 esnextJavaScript 를 출력하는 경우 개인 필드를 사용해야합니다.

또한 JavaScript / TypeScript 에코 시스템 내에서 개인 필드가 더 널리 보급됨에 따라 하나 또는 다른 것을 사용하는 조직 / 커뮤니티 규칙도 발전 할 것입니다.

노트의 다른 차이점

• 개인 필드는 Object.getOwnPropertyNames비슷한 방법으로 반환되지 않습니다

• 개인 필드는 JSON.stringify

• 상속과 관련하여 중요한 경우가 있습니다.

  예를 들어 TypeScript는 수퍼 클래스의 개인 속성과 이름이 같은 서브 클래스에서 개인 속성을 선언하는 것을 금지합니다.

  class Base {
      private value = 1;
  }
  
  class Sub extends Base {
      private value = 2; // Compile error:
  }
  

  개인 필드에는 해당되지 않습니다.

  class Base {
      #value = 1;
  }
  
  class Sub extends Base {
      #value = 2; // Not an error
  }
  

• private이니셜 라이저가없는 키워드 사유 재산이 방출되는 자바 스크립트의 속성 선언을 생성하지 않습니다 :

  class PrivateKeywordClass {
      private value?: string;
      getValue() { return this.value; }
  }
  

  컴파일 :

  class PrivateKeywordClass {
      getValue() { return this.value; }
  }
  

  개인 필드는 항상 속성 선언을 생성하는 반면 :

  class PrivateKeywordClass {
      #value?: string;
      getValue() { return this.#value; }
  }
  

  (타겟팅시 esnext)로 컴파일 :

  class PrivateKeywordClass {
      #value;
      getValue() { return this.#value; }
  }
  

더 읽을 거리 :

• “비공개”키워드의 미래
• 개인 필드를 추가 한 TypeScript PR

답변

class A {
    #a: number;
    constructor(a: number) {
        this.#a = a;
    }
}

let foo: A = new A(42);
foo.#a; // error, not allowed outside class bodies
(foo as any).#bar; // still nope.

class A {
    #a = "a";
    fnA() { return this.#a; }
}

class B extends A {
    #a = "b";
    fnB() { return this.#a; }
}

const b = new B();
b.fnA(); // returns "a" ; unique property #a in A is still retained
b.fnB(); // returns "b"

class Foo {
    #bar = 42;
    baz = "huhu";
}

Object.keys(new Foo()); // [ "baz" ]

class A {
    constructor(private a: number) { }
}

const a = new A(10);
a.a; // TS compile error
(a as any).a; // works
const casted: any = a; casted.a // works

class C {
  private foo = 10;
}

const res = new C()["foo"]; // 10, res has type number

class A1 { private a = 0; }
class A2 { private a = 42; }

const a: A1 = new A2();
// error: "separate declarations of a private property 'a'"
// same with hard private fields

class A {
    private a = 0;
    method(arg: A) {
        console.log(arg.a); // works
    }
}