Error on class fields accesses through super in JS files

src/compiler/utilitiesPublic.ts

@@ -102,7 +102,9 @@ import {
     isArrowFunction,
     isAssignmentExpression,
     isBinaryExpression,
+    isBindableStaticAccessExpression,
     isBindableStaticElementAccessExpression,
+    isBindableStaticNameExpression,
     isBindingElement,
     isBlock,
     isCallExpression,
@@ -111,6 +113,7 @@ import {
     isClassStaticBlockDeclaration,
     isDecorator,
     isElementAccessExpression,
+    isExpandoPropertyDeclaration,
     isExportAssignment,
     isExportDeclaration,
     isExportSpecifier,
@@ -153,6 +156,7 @@ import {
     isPropertyAccessExpression,
     isPropertyAssignment,
     isPropertyDeclaration,
+    isPrototypeAccess,
     isRootedDiskPath,
     isSourceFile,
     isStringLiteral,
@@ -1705,7 +1709,10 @@ export function isAutoAccessorPropertyDeclaration(node: Node): node is AutoAcces
 }
 
 /** @internal */
-export function isClassFieldAndNotAutoAccessor(node: Node): boolean {
+export function isClassFieldAndNotAutoAccessor(node: Declaration): boolean {
+    if (isInJSFile(node) && isExpandoPropertyDeclaration(node)) {
+        return (!isBindableStaticAccessExpression(node) || !isPrototypeAccess(node.expression)) && !isBindableStaticNameExpression(node, /*excludeThisKeyword*/ true);
+    }
     return node.parent && isClassLike(node.parent) && isPropertyDeclaration(node) && !hasAccessorModifier(node);
 }
 

tests/baselines/reference/classFieldSuperAccessible.js

@@ -16,6 +16,15 @@ class C extends Array {
         console.log(super.length);
     }
 }
+
+class D {
+    accessor b = () => {}
+}
+class E extends D {
+    foo() {
+        super.b()
+    }
+}
 
 
 //// [classFieldSuperAccessible.js]
@@ -35,3 +44,11 @@ class C extends Array {
         console.log(super.length);
     }
 }
+class D {
+    accessor b = () => { };
+}
+class E extends D {
+    foo() {
+        super.b();
+    }
+}

tests/baselines/reference/classFieldSuperAccessible.symbols

@@ -46,3 +46,23 @@ class C extends Array {
     }
 }
 
+class D {
+>D : Symbol(D, Decl(classFieldSuperAccessible.ts, 14, 1))
+
+    accessor b = () => {}
+>b : Symbol(D.b, Decl(classFieldSuperAccessible.ts, 16, 9))
+}
+class E extends D {
+>E : Symbol(E, Decl(classFieldSuperAccessible.ts, 18, 1))
+>D : Symbol(D, Decl(classFieldSuperAccessible.ts, 14, 1))
+
+    foo() {
+>foo : Symbol(E.foo, Decl(classFieldSuperAccessible.ts, 19, 19))
+
+        super.b()
+>super.b : Symbol(D.b, Decl(classFieldSuperAccessible.ts, 16, 9))
+>super : Symbol(D, Decl(classFieldSuperAccessible.ts, 14, 1))
+>b : Symbol(D.b, Decl(classFieldSuperAccessible.ts, 16, 9))
+    }
+}
+

tests/baselines/reference/classFieldSuperAccessible.types

@@ -50,3 +50,25 @@ class C extends Array {
     }
 }
 
+class D {
+>D : D
+
+    accessor b = () => {}
+>b : () => void
+>() => {} : () => void
+}
+class E extends D {
+>E : E
+>D : D
+
+    foo() {
+>foo : () => void
+
+        super.b()
+>super.b() : void
+>super.b : () => void
+>super : D
+>b : () => void
+    }
+}
+

tests/baselines/reference/classFieldSuperAccessibleJs1.errors.txt

@@ -0,0 +1,18 @@
+index.js(9,23): error TS2565: Property 'blah2' is used before being assigned.
+
+
+==== index.js (1 errors) ====
+    class C {
+      static blah1 = 123;
+    }
+    C.blah2 = 456;
+
+    class D extends C {
+      static {
+        console.log(super.blah1);
+        console.log(super.blah2);
+                          ~~~~~
+!!! error TS2565: Property 'blah2' is used before being assigned.
+      }
+    }
+

tests/baselines/reference/classFieldSuperAccessibleJs1.symbols

@@ -0,0 +1,37 @@
+//// [tests/cases/compiler/classFieldSuperAccessibleJs1.ts] ////
+
+=== index.js ===
+class C {
+>C : Symbol(C, Decl(index.js, 0, 0), Decl(index.js, 2, 1))
+
+  static blah1 = 123;
+>blah1 : Symbol(C.blah1, Decl(index.js, 0, 9))
+}
+C.blah2 = 456;
+>C.blah2 : Symbol(C.blah2, Decl(index.js, 2, 1))
+>C : Symbol(C, Decl(index.js, 0, 0), Decl(index.js, 2, 1))
+>blah2 : Symbol(C.blah2, Decl(index.js, 2, 1))
+
+class D extends C {
+>D : Symbol(D, Decl(index.js, 3, 14))
+>C : Symbol(C, Decl(index.js, 0, 0), Decl(index.js, 2, 1))
+
+  static {
+    console.log(super.blah1);
+>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, --, --))
+>super.blah1 : Symbol(C.blah1, Decl(index.js, 0, 9))
+>super : Symbol(C, Decl(index.js, 0, 0), Decl(index.js, 2, 1))
+>blah1 : Symbol(C.blah1, Decl(index.js, 0, 9))
+
+    console.log(super.blah2);
+>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, --, --))
+>super.blah2 : Symbol(C.blah2, Decl(index.js, 2, 1))
+>super : Symbol(C, Decl(index.js, 0, 0), Decl(index.js, 2, 1))
+>blah2 : Symbol(C.blah2, Decl(index.js, 2, 1))
+  }
+}
+

tests/baselines/reference/classFieldSuperAccessibleJs1.types

@@ -0,0 +1,42 @@
+//// [tests/cases/compiler/classFieldSuperAccessibleJs1.ts] ////
+
+=== index.js ===
+class C {
+>C : C
+
+  static blah1 = 123;
+>blah1 : number
+>123 : 123
+}
+C.blah2 = 456;
+>C.blah2 = 456 : 456
+>C.blah2 : number
+>C : typeof C
+>blah2 : number
+>456 : 456
+
+class D extends C {
+>D : D
+>C : C
+
+  static {
+    console.log(super.blah1);
+>console.log(super.blah1) : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>super.blah1 : number
+>super : typeof C
+>blah1 : number
+
+    console.log(super.blah2);
+>console.log(super.blah2) : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>super.blah2 : number
+>super : typeof C
+>blah2 : number
+  }
+}
+

tests/baselines/reference/classFieldSuperAccessibleJs2.symbols

@@ -0,0 +1,77 @@
+//// [tests/cases/compiler/classFieldSuperAccessibleJs2.ts] ////
+
+=== index.js ===
+class C {
+>C : Symbol(C, Decl(index.js, 0, 0))
+
+  constructor() {
+    this.foo = () => {
+>this.foo : Symbol(C.foo, Decl(index.js, 5, 3))
+>this : Symbol(C, Decl(index.js, 0, 0))
+>foo : Symbol(C.foo, Decl(index.js, 1, 17))
+
+      console.log("called arrow");
+>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, --, --))
+
+    };
+  }
+  foo() {
+>foo : Symbol(C.foo, Decl(index.js, 5, 3))
+
+    console.log("called method");
+>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, --, --))
+  }
+}
+
+class D extends C {
+>D : Symbol(D, Decl(index.js, 9, 1))
+>C : Symbol(C, Decl(index.js, 0, 0))
+
+  foo() {
+>foo : Symbol(D.foo, Decl(index.js, 11, 19))
+
+    console.log("SUPER:");
+>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, --, --))
+
+    super.foo();
+>super.foo : Symbol(C.foo, Decl(index.js, 5, 3))
+>super : Symbol(C, Decl(index.js, 0, 0))
+>foo : Symbol(C.foo, Decl(index.js, 5, 3))
+
+    console.log("THIS:");
+>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, --, --))
+
+    this.foo();
+>this.foo : Symbol(D.foo, Decl(index.js, 11, 19))
+>this : Symbol(D, Decl(index.js, 9, 1))
+>foo : Symbol(D.foo, Decl(index.js, 11, 19))
+  }
+}
+
+const obj = new D();
+>obj : Symbol(obj, Decl(index.js, 20, 5))
+>D : Symbol(D, Decl(index.js, 9, 1))
+
+obj.foo();
+>obj.foo : Symbol(D.foo, Decl(index.js, 11, 19))
+>obj : Symbol(obj, Decl(index.js, 20, 5))
+>foo : Symbol(D.foo, Decl(index.js, 11, 19))
+
+D.prototype.foo.call(obj);
+>D.prototype.foo.call : Symbol(CallableFunction.call, Decl(lib.es5.d.ts, --, --))
+>D.prototype.foo : Symbol(D.foo, Decl(index.js, 11, 19))
+>D.prototype : Symbol(D.prototype)
+>D : Symbol(D, Decl(index.js, 9, 1))
+>prototype : Symbol(D.prototype)
+>foo : Symbol(D.foo, Decl(index.js, 11, 19))
+>call : Symbol(CallableFunction.call, Decl(lib.es5.d.ts, --, --))
+>obj : Symbol(obj, Decl(index.js, 20, 5))
+

tests/baselines/reference/classFieldSuperAccessibleJs2.types

@@ -0,0 +1,92 @@
+//// [tests/cases/compiler/classFieldSuperAccessibleJs2.ts] ////
+
+=== index.js ===
+class C {
+>C : C
+
+  constructor() {
+    this.foo = () => {
+>this.foo = () => {      console.log("called arrow");    } : () => void
+>this.foo : () => void
+>this : this
+>foo : () => void
+>() => {      console.log("called arrow");    } : () => void
+
+      console.log("called arrow");
+>console.log("called arrow") : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>"called arrow" : "called arrow"
+
+    };
+  }
+  foo() {
+>foo : () => void
+
+    console.log("called method");
+>console.log("called method") : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>"called method" : "called method"
+  }
+}
+
+class D extends C {
+>D : D
+>C : C
+
+  foo() {
+>foo : () => void
+
+    console.log("SUPER:");
+>console.log("SUPER:") : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>"SUPER:" : "SUPER:"
+
+    super.foo();
+>super.foo() : void
+>super.foo : () => void
+>super : C
+>foo : () => void
+
+    console.log("THIS:");
+>console.log("THIS:") : void
+>console.log : (...data: any[]) => void
+>console : Console
+>log : (...data: any[]) => void
+>"THIS:" : "THIS:"
+
+    this.foo();
+>this.foo() : void
+>this.foo : () => void
+>this : this
+>foo : () => void
+  }
+}
+
+const obj = new D();
+>obj : D
+>new D() : D
+>D : typeof D
+
+obj.foo();
+>obj.foo() : void
+>obj.foo : () => void
+>obj : D
+>foo : () => void
+
+D.prototype.foo.call(obj);
+>D.prototype.foo.call(obj) : void
+>D.prototype.foo.call : <T, A extends any[], R>(this: (this: T, ...args: A) => R, thisArg: T, ...args: A) => R
+>D.prototype.foo : () => void
+>D.prototype : D
+>D : typeof D
+>prototype : D
+>foo : () => void
+>call : <T, A extends any[], R>(this: (this: T, ...args: A) => R, thisArg: T, ...args: A) => R
+>obj : D
+