Eslint marks parameter for 'options' as error

[benjamin-hoefer-fnt]

Hi! When I use the 'options' property and set for example the visibility to 'auto' eslint marks everything as an error and I get the message:

"Type {scrollbars: {visibility: string}} is not assignable to type PartialOptions | false | null ".

What can I do to avoid this?

Kind regards
Benjamin

[KingSora]

Good day @benjamin-hoefer-fnt

This doesn't happen on my side, but the error Type {scrollbars: {visibility: string}} is not assignable to type PartialOptions | false | null is correct, because the scrollbars.visibility field isn't accepting any string but just certain ones. And since Eslint or your type checker identified 'auto' as a string this error is valid.

I'm not too familiar with angular, but is there a possibility to mark this object as const? This would lead to type narrowing and fix the issue.

Something like this:

<overlay-scrollbars
  [options]="{ scrollbars: { visibility: 'auto' } } as const"
>

[benjamin-hoefer-fnt]

Good morning!

I tried the narrowing but it does not work. It is quite strange. I also do not get an autocompleting by my ide. Actually it should suggest the key/values according to the defined types. Something on the config seems not to be correct.

But thank you anyway!

[benjamin-hoefer-fnt]

Good day! I just recognized the problem not only occurs on my setup. I was just trying to change the options parameter for overlfow on your test setup on stackblitz and I've got the same problem there. The ide does not accept the values I pass for the parameter:

The screenshots show the behaviour of the stackblitz example.

Regards
Benjamin

[KingSora]

@benjamin-hoefer-fnt correct, please try to assign the options object like:

// ...
  options = {
    scrollbars: {
      theme: 'os-theme-light',
    },
    overflow: {
      x: 'hidden',
    }
  } as const;
// ...

Its the same problem as before: Typescript thinks overflow.x is a string (any string) but it expects it to be 'scroll' | 'hidden' | 'visible' etc. which causes this error. By marking the object with as const the type gets narrowed down from string to 'hidden' which aligns with the expected type.

Should also work in the StackBlitz example

[benjamin-hoefer-fnt]

Ah yeah, true. It works with 'as const' in StackBlitz.

[benjamin-hoefer-fnt]

Thank you!