lit / lit/lit.dev

typescript mixin example does not compile

Open
#859 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
142
Forks
230
PR merge metrics
No merged PRs in 30d

Description

I get an ts error with the example from https://lit.dev/docs/composition/mixins/#typing-the-subclass (second example - When a mixin adds new public/protected API)

The errors reads:
```
Conversion of type '{ new (...args: any[]): UploadMixinClass; prototype: MyMixin.UploadMixinClass; } & T' to type 'Constructor & T' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type '{ new (...args: any[]): UploadMixinClass; prototype: MyMixin.UploadMixinClass; } & T' is not comparable to type 'Constructor'.
Type 'UploadMixinClass & PolymerElement' is not comparable to type 'UploadMixinInterface'.
Property 'renderHighlight' is protected but type 'UploadMixinClass' is not a class derived from 'UploadMixinInterface'.ts(2352)
```

I think we should have this instead (adding `as unknown` on the return), to help ts beginners like myself:
``` ts
type Constructor = new (...args: any[]) => T;

export declare class UploadMixinInterface {
highlight: boolean;
protected renderHighlight(): unknown;
}

export const MyMixin = >(superClass: T) => {
class UploadMixinClass extends superClass {
@property() highlight = false;
protected renderHighlight() {
/* ... */
}
};
// Cast return type to your mixin's interface intersected with the superClass type
return UploadMixinClass as unknown as Constructor & T;
}
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the linked Lit documentation page and inspect the second example in “When a mixin adds new public/protected API.” Reproduce the reported TypeScript error, update the example’s return cast as proposed, and verify that the example compiles without the reported error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.