Getters in mixins get serialized to property accessors

[KonnorRogers]

🔎 Search Terms

Getters, mixins, classes

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ

⏯ Playground Link

https://tsplay.dev/mA0RkN

💻 Code

function mixin<T extends {new (...args: any[]): {}}> (superclass: T) {
   return class extends superclass {
      get validationTarget (): HTMLElement {
         return document.createElement("input")
      }
   }
}
class BaseClass {
   get validationTarget (): HTMLElement {
      return document.createElement("div")
   }
}

class MyClass extends mixin(BaseClass) {
  get validationTarget (): HTMLElement {
   return document.createElement("select")
  }
}

Output

"use strict";
function mixin(superclass) {
    return class extends superclass {
        get validationTarget() {
            return document.createElement("input");
        }
    };
}
class BaseClass {
    get validationTarget() {
        return document.createElement("div");
    }
}
class MyClass extends mixin(BaseClass) {
    get validationTarget() {
        return document.createElement("select");
    }
}

Compiler Options

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "target": "ES2017",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node"
  }
}

Playground Link: Provided

🙁 Actual behavior

The mixin creates a property accessor instead of a getter

🙂 Expected behavior

The mixin should create a getter and not a property accessor

Additional information about the issue

Seems related:

#54879 (comment)

Duplicate of: #44938

[Andarist]

the problem is that createUnionOrIntersectionProperty always produces a symbol with SymbolFlags.Property on it, but at the very least when all combined properties are accessors it should have proper SymbolFlags.Accessor

that combined property is created here: https://github.dev/microsoft/TypeScript/blob/f5238c328e553df2c0af868173dfd3789d77205f/src/compiler/checker.ts#L15089

[KonnorRogers]

Also of note, this does not affect static getters, only instance getters.

[KonnorRogers]

If anyone is looking for a super silly work around ,you can wrap the mixin function and cast it with the appropriate getters.

It's not ideal, but at least it doesn't break builds.

https://www.typescriptlang.org/play/?ts=5.4.5#code/GYVwdgxgLglg9mABAfQLYwB4zAHgCqICmGUhYAJgM6IDeYhA7ogBQB07AhgE4DmlAXIg5gAngG0AugEpBNAL5yAfC0ogADoS4QANh0oDEeKbQBQic10JQQXJDr3UAspmwBhXfqIkyVRKo1aHtQ0ZuZhPFaIAG4c2jDkHLAIeNwRUCwyiAASeI4AMgCi2oSoZOkhYZUWVjZI5HAQIKVgUKwQlomERSVlzABE2GogUH1SoZVy45OTJlAiGojOWGAA4lakXNQAvKbhkTFxCUlgKbxWzJk5+d3NUCYzcwsYiDsA1oQicMCLLqvrmpQTCZQJBjog1Fw4AFtCI8PNCOQlth8F5SBRgvQmGxOLwDMJxNJZAplMx-Jp7PpBEZdtVrLYUOhlqT1OSgsY9IhxmEAPLoKA4ABKNVscI0OEehC+DN++EUigANIh3p9vki-lANpRlAAyWiITEsdisVJ40SSTJqtYagGIaYmCnUABCekI7gcNMQaWisXiiXgJ1SkQugiuhWKtw9YUsdLqDSaZTaHVIN16fXIMCioym9yBDsWIjdnmIaN8EKhmhhooRauYzsorrZNK9B19x1OXuD2VyYZ6LQ90dqiHqjVuicInRTLX69eK0Cz5mmQA

EDIT: The downside is because the transform isn't "homomorphic" you lose out on comments set in your mixin.

[maxpatiiuk]

This bug can be reproduced even without mixins:

declare class ViewBase {
   get stationary(): boolean;
}

declare class View {
   get stationary(): boolean;
}

declare const ViewClass: new ()=>View & ViewBase;

declare class SubView extends ViewClass {
   override get stationary(): boolean;
   //           ^ ERROR: 'stationary' is defined as a property in class 'View & ViewBase',
   //             but is overridden here in 'SubView' as an accessor.(2611)
}

The workaround is to do intersection of constructor types, not intersection of instance types:

declare const ViewClass2: typeof View & typeof ViewBase;

declare class SubView2 extends ViewClass2 {
   override get stationary(): boolean;
}

https://www.typescriptlang.org/play/?#code/CYUwxgNghgTiAEkoGdnwGoEsQHcBCKCA3gFDzkDmIALvMtVNZgPYB2sAngBQCUAXPABGzZhBBRWAbhIBfEiVBI4iaKgzYc8UuXhVa9Ri3Yxu-ISLETpcheGjKwbeutwBhVcgGtc8XgF4APiwfADIXfEJpWyUEJDUAZQBXQWDNEAAPahBWYDRU9xQ0bXJmADcQGBhMUF0aOgYmNk5eAWFRcSlZeUV7WKdafI8AJgFqDgAHEGYAM3D4MLHJmfCCZBAonthYj3gklI0h+AysnLyNAtRD4vgyiqqavXrDJpMW83arWSA