Skip to content

bug: TypeScript type checking muted when using Mixin() #6419

@exorex

Description

@exorex

Prerequisites

Stencil Version

4.38.1

Current Behavior

When using a Mixin() factory to extend a Stencil component, TypeScript type checking becomes muted.
Methods or properties that don’t exist on the class are not reported as errors by TypeScript.

const AWrap = (Base) => {
  class C extends Base {
    propC = C;
  }
  return C;
};

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent extends Mixin(AWrap) {
  @Prop() first: string = '';
  @Prop() middle: string = '';
  @Prop() last: string = '';

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    // ❌ This should be a TypeScript error, but it's not
    return <div>Hello, World! I'm {this.getText()} {this.fakeMethod()}</div>;
  }
}

Expected Behavior

Property 'fakeMethod' does not exist on type 'MyComponent'.

System Info

System: node 22.13.1
    Platform: windows (10.0.26100)
   CPU Model: 11th Gen Intel(R) Core(TM) i5-11400H @ 2.70GHz (12 cpus)
    Compiler: C:\Users\exorex\OneDrive\Desktop\my-component\node_modules\@stencil\core\compiler\stencil.js
       Build: 1760088209
     Stencil: 4.38.1
  TypeScript: 5.9.3
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

  1. Create a Stencil component that uses Mixin().
  2. Add a method call in render() that doesn’t exist in the class (e.g. this.fakeMethod()).
  3. Observe that TypeScript does not report any error.

Code Reproduction URL

https://github.com/exorex/stencil-mixin-types-issue

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within StencilHelp Wanted

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions