Typescript 3.1 - compile error. toggleAttribute type conflict in LegacyElementMixin

[aarondrabeck]

Description

The following error is seen in typescript 3.1 when using any element with the LegacyElementMixin:

error TS2320: Interface 'AppDrawerElement' cannot simultaneously extend types 'LegacyElementMixin' and 'HTMLElement'. Named property 'toggleAttribute' of types 'LegacyElementMixin' and 'HTMLElement' are not identical.

It appears a new API for toggleAttribute was introduced with a signature toggleAttribute(qualifiedName: string, force?: boolean): boolean; this is in conflict with the existing method toggleAttribute in LegacyElementMixin with a signature of toggleAttribute(name: string, bool?: boolean, node?: Element|null): void;. The result is compilation errors when using Typescript 3.1 with Polymer.

Live Demo

none

Versions

Polymer 2/3 typescript defs.

[web-padawan]

See also #5307

[aarondrabeck]

After reviewing #5307, I do not believe Typescript supports interface unions like this.

A admittedly messy fix would be for each element to inherit from a modified HTMLElement.

Before

interface IronSelectorElement extends IronMultiSelectableBehavior, LegacyElementMixin, HTMLElement {}

After

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type HTMLElementLessToggle = Omit<HTMLElement, 'toggleAttribute'>;

interface IronSelectorElement extends IronMultiSelectableBehavior, LegacyElementMixin, HTMLElementLessToggle

[43081j]

Just ran into this myself, too.

In reality the method should be removed from the mixin, or at least we should update the typescript generator to exclude it from output.

[TimvdLippe]

The problem is that our definition is different than the official one. Removing our TypeScript definition is therefore incorrect for those calling it the Polymer-way. However, now the project does not compile at all, so I think it is our only option 😢

[43081j]

yup 🙈 i didn't notice the extra parameter we have...

toggleAttribute(qualifiedName: string, force?: boolean): boolean;
toggleAttribute(qualifiedName: string, force?: boolean, node?: Element|null): void;

the third parameter is optional on our end, so maybe just returning boolean will fix the problem? as tsc should infer that it implements the same signature.

[TimvdLippe]

Yes that is fine by me.