javascript エラー「Uncaught SyntaxError: Private field ‘#x’ must be declared in an enclosing class」の解決方法

作成日 2022.12.24
javascript
javascript

javascriptで、エラー「Uncaught SyntaxError: Private field ‘#x’ must be declared in an enclosing class」が発生した場合の原因と解決方法を記述してます。プライベートに設定してあるクラス内のプロパティやメソッドに外部からアクセスした場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法

環境

OS windows11 pro 64bit
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

エラー内容

以下の、「クラス」のプロパティにアクセスしようとしたコードで発生。

class Myclass {

  #n;

  constructor(n) {
    this.#n = n;
  }

  #calc() {
    return this.#n * 2;
  }

  calc() {    
    console.log(this.#calc());
  }

}

const obj = new Myclass(10);

console.log(obj.#n);
// Uncaught SyntaxError: Private field '#num' must be declared in an enclosing class

エラーメッセージ

Uncaught SyntaxError: Private field '#x' must be declared in an enclosing class

画像

firefox107の場合では、以下のエラーが発生します。

Uncaught SyntaxError: reference to undeclared private field or method #n

画像

safari15.5では、以下のエラーとなります。

SyntaxError: Cannot reference undeclared private names: "#n"

画像

原因

「#」を使用するとプライベートプロパティとして扱われるため外部からアクセスできない。
また、プライベートメソッドもアクセスできません。

console.log(obj.#calc());
// Uncaught SyntaxError: Private field '#calc' must be declared in an enclosing class

解決方法

外部からアクセスする必要があるのであればプライベートは使用しない。

class Myclass {

  constructor(n) {
    this._n = n;
  }

  _calc() {
    return this._n * 2;
  }

  calc() {    
    console.log(this._calc());
  }

}

const obj = new Myclass(10);

console.log(obj._n);
// 10

console.log(obj._calc());
// 20

または、「static」にしても同じエラーが発生します。

class Myclass {

  static #n;

  constructor(n) {
    Myclass.#n = n;
  }

  #calc() {
    return Myclass.#n * 2;
  }

  calc() {    
    console.log(this.#calc());
  }

}

const obj = new Myclass(10);

console.log(obj.#n);
// Uncaught SyntaxError: Private field '#n' must be declared in an enclosing class