typescript mixin example does not compile
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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