Using object destructuring with ECMAScript's private field as computed property name leads to runtime error

[adamgauthier]

TypeScript Version: 3.8.3

Search Terms: computed object property name destructuring private ECMAScript

Code

class PropertyAccessor {
    readonly #propertyName: string;

    constructor(propertyName: string) {
        this.#propertyName = propertyName;
    }

    getPropertyValue(obj: Record<string, string | undefined>): string | undefined {
        const { [this.#propertyName]: value } = obj;
        return value;
    }
}

const accessor = new PropertyAccessor('name');
console.log(
    accessor.getPropertyValue({ name: 'Adam' })
);

Expected behavior:
'Adam' is logged at runtime.

Actual behavior:
Runtime error occurs:

Private field '#propertyName' must be declared in an enclosing class 

Additional information:
I just started using TypeScript and I ran into this problem while converting one of my javascript projects, the behavior was confusing to me. It seems like the code is transpiled incorrectly, as it works when not using destructuring syntax:

const { [this.#propertyName]: value } = obj;
// compiles to
const { [(_propertyName = new WeakMap(), this.#propertyName)]: value } = obj;

const value = obj[this.#propertyName];
// compiles to
const value = obj[__classPrivateFieldGet(this, _propertyName)];

The error does not occur when using TypeScript's private field instead of ECMAScript's.
The error does not occur when targeting ESNext.

Related Issues: Maybe #26572 #26355? Doesn't seem like the same problem but similar keywords.

Output

"use strict";
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to set private field on non-instance");
    }
    privateMap.set(receiver, value);
    return value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to get private field on non-instance");
    }
    return privateMap.get(receiver);
};
var _propertyName;
class PropertyAccessor {
    constructor(propertyName) {
        _propertyName.set(this, void 0);
        __classPrivateFieldSet(this, _propertyName, propertyName);
    }
    getPropertyValue(obj) {
        const { [(_propertyName = new WeakMap(), this.#propertyName)]: value } = obj;
        return value;
    }
}
const accessor = new PropertyAccessor('name');
console.log(accessor.getPropertyValue({ name: 'Adam' }));

Compiler Options

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": 2,
    "target": "ES2017",
    "jsx": "React",
    "module": "ESNext"
  }
}

Playground Link: Provided

[a-tarasyuk]

The following example works for the ESNext target, because of TS emits JavaScript code without polyfills for private fields

"use strict";
class Foo {
    constructor(value) {
        this.#value = value;
    }
    #value; // <- declarated private value. if remove it JavaScript engines will throw 
            // Private field '#propertyName' must be declared in an enclosing class 

    getValue(data) {
        const { [this.#value]: value } = data;
        return value;
    }
}

You can try to use workaround - Playground, like so

const key = this.#value;
const { [key]: value } = data;

However, I think, it is a bug, because, the following code

const { [this.#value]: value } = data;

should be converted something like so

const { [__classPrivateFieldGet(this, _value)]: value } = data;

cc @RyanCavanaugh

[nicolo-ribaudo]

I was going to open a new issue, but I think it's the same as this one. However, I'm using computed class methods and not destructuring:

let getX: (a: A) => number;

class A {
  #x = 2;

  [(getX = (obj: A) => obj.#x, "_")]() {}
}

console.log(getX!(new A));

playground

[rbuckton]

@nicolo-ribaudo The fix @a-tarasyuk has proposed doesn't address this, but I think I found the cause of the issue you're seeing. I've brought up the problem in the PR so hopefully we can resolve both at the same time.