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

[amcasey]

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

[amcasey]

I'm assuming this is because we've newly realized that an intersection is empty.

[RyanCavanaugh]

@amcasey their package.json specifies 3.4; the break on enforcing sound indexed access assignment occurred in 3.5 or 3.6 I believe.

[amcasey]

@RyanCavanaugh I'm pretty sure I only filed errors that showed up in the diff between 3.8 and 3.9, but I may have missed one. I did not, as a rule, use the project's copy of tsc for my tests.

[amcasey]

Also, another observation from my tests - the declared TS version isn't necessarily the used TS version (because some other dependency may require a higher version?).

Edit: they appear to be using 3.7.4 - https://github.com/material-components/material-components-web-components/blob/b1862998d80f4b0b917c817e6efde15a2504d8da/package-lock.json#L16278

[amcasey]

Re-ran locally.
3.4: error TS6307: File 'node_modules/@material/progress-indicator/foundation.ts' is not in project file list. Projects must list all files or use an 'include' pattern.
3.5: success
3.6: success
3.7: success
3.8: success
3.9: as above

[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]

I think I'm having the same issue.

function functionName(message: string): PropertyDecorator {

    return function (target: any, propertyKey: string) {

    }
}

resulting in:

Type '(target: any, propertyKey: string) => void' is not assignable to type 'PropertyDecorator'.
   Types of parameters 'propertyKey' and 'propertyKey' are incompatible.
    Type 'string | symbol' is not assignable to type 'string'.
      Type 'symbol' is not assignable to type 'string'.

version:

`> tsc --version
Version 3.9.6`

[joebnb]

same issue,in 3.9.7

[MauroMS]

Anyone figured out a workaround for that?
Thanks!

[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 :)

[MauroMS]

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 :)

Thanks, I'll give it a try!