New error: Type 'string' is not assignable to type 'string & ...'

https://github.com/material-components/material-components-web-components/blob/b1862998d80f4b0b917c817e6efde15a2504d8da/packages/linear-progress/src/mwc-linear-progress-base.ts#L109

packages/linear-progress/src/mwc-linear-progress-base.ts:109:9 - error TS2322: Type 'string' is not assignable to type 'string & ((property: string) => string) & ((property: string) => string) & ((index: number) => string) & ((property: string) => string) & ((property: string, value: string | null, priority?: string | undefined) => void)'.
  Type 'string' is not assignable to type '(property: string) => string'.

109         this.bufferElement
            ~~~~~~~~~~~~~~~~~~
110             .style[property as Exclude<keyof CSSStyleDeclaration, 'length'|'parentRule'>] =
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

https://github.com/material-components/material-components-web-components/blob/b1862998d80f4b0b917c817e6efde15a2504d8da/packages/linear-progress/src/mwc-linear-progress-base.ts#L119

packages/linear-progress/src/mwc-linear-progress-base.ts:119:9 - error TS2322: Type 'string' is not assignable to type 'string & ((property: string) => string) & ((property: string) => string) & ((index: number) => string) & ((property: string) => string) & ((property: string, value: string | null, priority?: string | undefined) => void)'.
  Type 'string' is not assignable to type '(property: string) => string'.

119         this.primaryBar
            ~~~~~~~~~~~~~~~
120             .style[property as Exclude<keyof CSSStyleDeclaration, 'length'|'parentRule'>] =
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To repro:

1. npm ci
2. npm run build:styling
3. tsc -b -f

[jleider]

Im having a similar issue as @amcasey. This code was working as expected TS < 3.9.x. I am still seeing this error in the 3.9.2 release.

  setInlineStyle<K extends keyof CSSStyleDeclaration>(key: K, value: CSSStyleDeclaration[K]): this {
    this.setInlineStyles({ [key]: value }); // Errors here
    return this;
  }

  setInlineStyles(styles: Partial<CSSStyleDeclaration>): this {
    Object.assign(this.element.style, styles);
    return this;
  }

TS2345: Argument of type '{ [x: string]: CSSStyleDeclaration[K]; }' is not assignable to parameter of type 'Partial<CSSStyleDeclaration>'.
  Index signatures are incompatible.
    Type 'CSSStyleDeclaration[K]' is not assignable to type 'string | undefined'.
      Type 'string | number | CSSRule | ((property: string) => string) | ((property: string) => string) | ((index: number) => string) | ((property: string) => string) | ((property: string, value: string | null, priority?: string | undefined) => void) | null' is not assignable to type 'string | undefined'.
        Type 'null' is not assignable to type 'string | undefined'.
          Type 'CSSStyleDeclaration[K]' is not assignable to type 'string'.
            Type 'string | number | CSSRule | ((property: string) => string) | ((property: string) => string) | ((index: number) => string) | ((property: string) => string) | ((property: string, value: string | null, priority?: string | undefined) => void) | null' is not assignable to type 'string'.
              Type 'null' is not assignable to type 'string'.

[rmjoia]

Well, when I added | symbol the error went away, seems that the correct type is string | symbol and not just string or symbol as it fits my needs 😃