Fix Computed Property Name Bindings

src/compiler/checker.ts

@@ -17446,6 +17446,23 @@ namespace ts {
             const links = getNodeLinks(node.expression);
             if (!links.resolvedType) {
                 links.resolvedType = checkExpression(node.expression);
+
+                if (isPropertyDeclaration(node.parent) && isClassLike(node.parent.parent)) {
+                    const container = getEnclosingBlockScopeContainer(node);
+                    let current = container;
+                    let containedInIterationStatement = false;
+                    while (current && !nodeStartsNewLexicalEnvironment(current)) {
+                        if (isIterationStatement(current, /*lookInLabeledStatements*/ false)) {
+                            containedInIterationStatement = true;
+                            break;
+                        }
+                        current = current.parent;
+                    }
+                    if (containedInIterationStatement) {
+                        getNodeLinks(current).flags |= NodeCheckFlags.LoopWithCapturedBlockScopedBinding;
+                    }
+                    links.flags |= NodeCheckFlags.BlockScopedBindingInLoop;
+                }
                 // This will allow types number, string, symbol or any. It will also allow enums, the unknown
                 // type, and any union of these types (like string | number).
                 if (links.resolvedType.flags & TypeFlags.Nullable ||

src/compiler/transformer.ts

@@ -84,6 +84,8 @@ namespace ts {
         let lexicalEnvironmentFunctionDeclarations: FunctionDeclaration[];
         let lexicalEnvironmentVariableDeclarationsStack: VariableDeclaration[][] = [];
         let lexicalEnvironmentFunctionDeclarationsStack: FunctionDeclaration[][] = [];
+        let lexicalEnvironmentScopingStack: LexicalEnvironmentScoping[] = [];
+        let lexicalEnvironmentScoping: LexicalEnvironmentScoping;
         let lexicalEnvironmentStackOffset = 0;
         let lexicalEnvironmentSuspended = false;
         let emitHelpers: EmitHelper[] | undefined;
@@ -258,7 +260,7 @@ namespace ts {
          * Starts a new lexical environment. Any existing hoisted variable or function declarations
          * are pushed onto a stack, and the related storage variables are reset.
          */
-        function startLexicalEnvironment(): void {
+        function startLexicalEnvironment(scoping: LexicalEnvironmentScoping = LexicalEnvironmentScoping.Function): void {
             Debug.assert(state > TransformationState.Uninitialized, "Cannot modify the lexical environment during initialization.");
             Debug.assert(state < TransformationState.Completed, "Cannot modify the lexical environment after transformation has completed.");
             Debug.assert(!lexicalEnvironmentSuspended, "Lexical environment is suspended.");
@@ -267,11 +269,13 @@ namespace ts {
             // stack size variable. This allows us to reuse existing array slots we've
             // already allocated between transformations to avoid allocation and GC overhead during
             // transformation.
+            lexicalEnvironmentScopingStack[lexicalEnvironmentStackOffset] = lexicalEnvironmentScoping;
             lexicalEnvironmentVariableDeclarationsStack[lexicalEnvironmentStackOffset] = lexicalEnvironmentVariableDeclarations;
             lexicalEnvironmentFunctionDeclarationsStack[lexicalEnvironmentStackOffset] = lexicalEnvironmentFunctionDeclarations;
             lexicalEnvironmentStackOffset++;
             lexicalEnvironmentVariableDeclarations = undefined!;
             lexicalEnvironmentFunctionDeclarations = undefined!;
+            lexicalEnvironmentScoping = scoping;
         }
 
         /** Suspends the current lexical environment, usually after visiting a parameter list. */
@@ -308,7 +312,10 @@ namespace ts {
                 if (lexicalEnvironmentVariableDeclarations) {
                     const statement = createVariableStatement(
                         /*modifiers*/ undefined,
-                        createVariableDeclarationList(lexicalEnvironmentVariableDeclarations)
+                        createVariableDeclarationList(
+                            lexicalEnvironmentVariableDeclarations,
+                            lexicalEnvironmentScoping === LexicalEnvironmentScoping.Block ? NodeFlags.Let : undefined
+                        )
                     );
 
                     if (!statements) {
@@ -324,9 +331,11 @@ namespace ts {
             lexicalEnvironmentStackOffset--;
             lexicalEnvironmentVariableDeclarations = lexicalEnvironmentVariableDeclarationsStack[lexicalEnvironmentStackOffset];
             lexicalEnvironmentFunctionDeclarations = lexicalEnvironmentFunctionDeclarationsStack[lexicalEnvironmentStackOffset];
+            lexicalEnvironmentScoping = lexicalEnvironmentScopingStack[lexicalEnvironmentStackOffset];
             if (lexicalEnvironmentStackOffset === 0) {
                 lexicalEnvironmentVariableDeclarationsStack = [];
                 lexicalEnvironmentFunctionDeclarationsStack = [];
+                lexicalEnvironmentScopingStack = [];
             }
             return statements;
         }
@@ -358,6 +367,7 @@ namespace ts {
                 lexicalEnvironmentVariableDeclarationsStack = undefined!;
                 lexicalEnvironmentFunctionDeclarations = undefined!;
                 lexicalEnvironmentFunctionDeclarationsStack = undefined!;
+                lexicalEnvironmentScopingStack = undefined!;
                 onSubstituteNode = undefined!;
                 onEmitNode = undefined!;
                 emitHelpers = undefined;

src/compiler/transformers/ts.ts

@@ -208,7 +208,10 @@ namespace ts {
          * @param node The node to visit.
          */
         function visitorWorker(node: Node): VisitResult<Node> {
-            if (node.transformFlags & TransformFlags.TypeScript) {
+            if (node.kind === SyntaxKind.Block && node.transformFlags & TransformFlags.AssertTypeScript) {
+                return visitBlock(node as Block);
+            }
+            else if (node.transformFlags & TransformFlags.TypeScript) {
                 // This node is explicitly marked as TypeScript, so we should transform the node.
                 return visitTypeScript(node);
             }
@@ -560,6 +563,19 @@ namespace ts {
             }
         }
 
+        function visitBlock(node: Block): Block {
+            startLexicalEnvironment(LexicalEnvironmentScoping.Block);
+            node = visitEachChild(node, visitor, context);
+            const declarations = endLexicalEnvironment();
+            if (some(declarations)) {
+                return updateBlock(
+                    node,
+                    mergeLexicalEnvironment(node.statements, declarations)
+                );
+            }
+            return node;
+        }
+
         function visitSourceFile(node: SourceFile) {
             const alwaysStrict = getStrictOptionValue(compilerOptions, "alwaysStrict") &&
                 !(isExternalModule(node) && moduleKind >= ModuleKind.ES2015) &&

src/compiler/types.ts

@@ -5212,6 +5212,11 @@ namespace ts {
         writeFile: WriteFileCallback;
     }
 
+    export const enum LexicalEnvironmentScoping {
+        Function,
+        Block
+    }
+
     export interface TransformationContext {
         /*@internal*/ getEmitResolver(): EmitResolver;
         /*@internal*/ getEmitHost(): EmitHost;
@@ -5220,7 +5225,7 @@ namespace ts {
         getCompilerOptions(): CompilerOptions;
 
         /** Starts a new lexical environment. */
-        startLexicalEnvironment(): void;
+        startLexicalEnvironment(scoping?: LexicalEnvironmentScoping): void;
 
         /** Suspends the current lexical environment, usually after visiting a parameter list. */
         suspendLexicalEnvironment(): void;

tests/baselines/reference/api/tsserverlibrary.d.ts

@@ -2752,11 +2752,15 @@ declare namespace ts {
         MappedTypeParameter = 3,
         Unspecified = 4
     }
+    enum LexicalEnvironmentScoping {
+        Function = 0,
+        Block = 1
+    }
     interface TransformationContext {
         /** Gets the compiler options supplied to the transformer. */
         getCompilerOptions(): CompilerOptions;
         /** Starts a new lexical environment. */
-        startLexicalEnvironment(): void;
+        startLexicalEnvironment(scoping?: LexicalEnvironmentScoping): void;
         /** Suspends the current lexical environment, usually after visiting a parameter list. */
         suspendLexicalEnvironment(): void;
         /** Resumes a suspended lexical environment, usually before visiting a function body. */

tests/baselines/reference/api/typescript.d.ts

@@ -2752,11 +2752,15 @@ declare namespace ts {
         MappedTypeParameter = 3,
         Unspecified = 4
     }
+    enum LexicalEnvironmentScoping {
+        Function = 0,
+        Block = 1
+    }
     interface TransformationContext {
         /** Gets the compiler options supplied to the transformer. */
         getCompilerOptions(): CompilerOptions;
         /** Starts a new lexical environment. */
-        startLexicalEnvironment(): void;
+        startLexicalEnvironment(scoping?: LexicalEnvironmentScoping): void;
         /** Suspends the current lexical environment, usually after visiting a parameter list. */
         suspendLexicalEnvironment(): void;
         /** Resumes a suspended lexical environment, usually before visiting a function body. */

tests/baselines/reference/classBlockScoping.js

@@ -35,9 +35,9 @@ function f(b: boolean) {
 
 //// [classBlockScoping.js]
 function f(b) {
-    var _a;
     var Foo;
     if (b) {
+        var _a = void 0;
         Foo = (_a = /** @class */ (function () {
                 function Foo() {
                 }

tests/baselines/reference/classExpressionWithStaticProperties3.js

@@ -10,9 +10,9 @@ for (let i = 0; i < 3; i++) {
 arr.forEach(C => console.log(C.y()));
 
 //// [classExpressionWithStaticProperties3.js]
-var _a;
 var arr = [];
 var _loop_1 = function (i) {
+    var _a = void 0;
     arr.push((_a = /** @class */ (function () {
             function C() {
             }

tests/baselines/reference/classExpressionWithStaticPropertiesES63.js

@@ -10,9 +10,9 @@ for (let i = 0; i < 3; i++) {
 arr.forEach(C => console.log(C.y()));
 
 //// [classExpressionWithStaticPropertiesES63.js]
-var _a;
 const arr = [];
 for (let i = 0; i < 3; i++) {
+    let _a;
     arr.push((_a = class C {
         },
         _a.x = i,

tests/baselines/reference/computedPropertyNames52_ES5.errors.txt

@@ -0,0 +1,17 @@
+tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES5.ts(5,13): error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.
+
+
+==== tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES5.ts (1 errors) ====
+    const classes = [];
+    for (let i = 0; i <= 10; ++i) {
+        classes.push(
+            class A {
+                [i] = "my property";
+                ~~~
+!!! error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.
+            }
+        );
+    }
+    for (const clazz of classes) {
+        console.log(Object.getOwnPropertyNames(new clazz()));
+    }

tests/baselines/reference/computedPropertyNames52_ES5.js

@@ -0,0 +1,33 @@
+//// [computedPropertyNames52_ES5.ts]
+const classes = [];
+for (let i = 0; i <= 10; ++i) {
+    classes.push(
+        class A {
+            [i] = "my property";
+        }
+    );
+}
+for (const clazz of classes) {
+    console.log(Object.getOwnPropertyNames(new clazz()));
+}
+
+//// [computedPropertyNames52_ES5.js]
+var classes = [];
+var _loop_1 = function (i) {
+    var _a = void 0, _b = void 0;
+    classes.push((_b = /** @class */ (function () {
+            function A() {
+                this[_a] = "my property";
+            }
+            return A;
+        }()),
+        _a = i,
+        _b));
+};
+for (var i = 0; i <= 10; ++i) {
+    _loop_1(i);
+}
+for (var _i = 0, classes_1 = classes; _i < classes_1.length; _i++) {
+    var clazz = classes_1[_i];
+    console.log(Object.getOwnPropertyNames(new clazz()));
+}

tests/baselines/reference/computedPropertyNames52_ES5.symbols

@@ -0,0 +1,36 @@
+=== tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES5.ts ===
+const classes = [];
+>classes : Symbol(classes, Decl(computedPropertyNames52_ES5.ts, 0, 5))
+
+for (let i = 0; i <= 10; ++i) {
+>i : Symbol(i, Decl(computedPropertyNames52_ES5.ts, 1, 8))
+>i : Symbol(i, Decl(computedPropertyNames52_ES5.ts, 1, 8))
+>i : Symbol(i, Decl(computedPropertyNames52_ES5.ts, 1, 8))
+
+    classes.push(
+>classes.push : Symbol(Array.push, Decl(lib.es5.d.ts, --, --))
+>classes : Symbol(classes, Decl(computedPropertyNames52_ES5.ts, 0, 5))
+>push : Symbol(Array.push, Decl(lib.es5.d.ts, --, --))
+
+        class A {
+>A : Symbol(A, Decl(computedPropertyNames52_ES5.ts, 2, 17))
+
+            [i] = "my property";
+>[i] : Symbol(A[i], Decl(computedPropertyNames52_ES5.ts, 3, 17))
+>i : Symbol(i, Decl(computedPropertyNames52_ES5.ts, 1, 8))
+        }
+    );
+}
+for (const clazz of classes) {
+>clazz : Symbol(clazz, Decl(computedPropertyNames52_ES5.ts, 8, 10))
+>classes : Symbol(classes, Decl(computedPropertyNames52_ES5.ts, 0, 5))
+
+    console.log(Object.getOwnPropertyNames(new clazz()));
+>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
+>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
+>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
+>Object.getOwnPropertyNames : Symbol(ObjectConstructor.getOwnPropertyNames, Decl(lib.es5.d.ts, --, --))
+>Object : Symbol(Object, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --))
+>getOwnPropertyNames : Symbol(ObjectConstructor.getOwnPropertyNames, Decl(lib.es5.d.ts, --, --))
+>clazz : Symbol(clazz, Decl(computedPropertyNames52_ES5.ts, 8, 10))
+}

tests/baselines/reference/computedPropertyNames52_ES5.types

@@ -0,0 +1,47 @@
+=== tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES5.ts ===
+const classes = [];
+>classes : any[]
+>[] : undefined[]
+
+for (let i = 0; i <= 10; ++i) {
+>i : number
+>0 : 0
+>i <= 10 : boolean
+>i : number
+>10 : 10
+>++i : number
+>i : number
+
+    classes.push(
+>classes.push(        class A {            [i] = "my property";        }    ) : number
+>classes.push : (...items: any[]) => number
+>classes : any[]
+>push : (...items: any[]) => number
+
+        class A {
+>class A {            [i] = "my property";        } : typeof A
+>A : typeof A
+
+            [i] = "my property";
+>[i] : string
+>i : number
+>"my property" : "my property"
+        }
+    );
+}
+for (const clazz of classes) {
+>clazz : any
+>classes : any[]
+
+    console.log(Object.getOwnPropertyNames(new clazz()));
+>console.log(Object.getOwnPropertyNames(new clazz())) : void
+>console.log : (message?: any, ...optionalParams: any[]) => void
+>console : Console
+>log : (message?: any, ...optionalParams: any[]) => void
+>Object.getOwnPropertyNames(new clazz()) : string[]
+>Object.getOwnPropertyNames : (o: any) => string[]
+>Object : ObjectConstructor
+>getOwnPropertyNames : (o: any) => string[]
+>new clazz() : any
+>clazz : any
+}

tests/baselines/reference/computedPropertyNames52_ES6.errors.txt

@@ -0,0 +1,17 @@
+tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES6.ts(5,13): error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.
+
+
+==== tests/cases/conformance/es6/computedProperties/computedPropertyNames52_ES6.ts (1 errors) ====
+    const classes = [];
+    for (let i = 0; i <= 10; ++i) {
+        classes.push(
+            class A {
+                [i] = "my property";
+                ~~~
+!!! error TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.
+            }
+        );
+    }
+    for (const clazz of classes) {
+        console.log(Object.getOwnPropertyNames(new clazz()));
+    }

tests/baselines/reference/computedPropertyNames52_ES6.js

@@ -0,0 +1,28 @@
+//// [computedPropertyNames52_ES6.ts]
+const classes = [];
+for (let i = 0; i <= 10; ++i) {
+    classes.push(
+        class A {
+            [i] = "my property";
+        }
+    );
+}
+for (const clazz of classes) {
+    console.log(Object.getOwnPropertyNames(new clazz()));
+}
+
+//// [computedPropertyNames52_ES6.js]
+const classes = [];
+for (let i = 0; i <= 10; ++i) {
+    let _a, _b;
+    classes.push((_b = class A {
+            constructor() {
+                this[_a] = "my property";
+            }
+        },
+        _a = i,
+        _b));
+}
+for (const clazz of classes) {
+    console.log(Object.getOwnPropertyNames(new clazz()));
+}