Vuetify: [Bug Report] Can not specify theme colors when creating Vuetify instance: Index signature is missing in type 'Color'

[hojlind]

Environment

Vuetify Version: 2.2.17
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.132
OS: Windows 10

Steps to reproduce

• Generate vue-cli project with typescript enabled and eslint + prettifier
• Add vuetify as an addon
• include vuetify typescript files in the tsconfig.json
• Use predefined material colors as suggested by the example on the webpage (https://vuetifyjs.com/en/customization/theme/) (in repo just a single color but tested with the exact example as well)
• Get error when compiling

Expected Behavior

Project compiles without errors

Actual Behavior

Project compiles but raises an error. However the code still works, but this should not happen none the less

Reproduction Link

https://github.com/hojlind/vuetify-example

[MajesticPotatoe]

primary: colors.pink => colors.pink is an object. you need to specify the particular variant of pink you would like eg: primary: colors.pink.base

[hojlind]

If that is the case then it seems to me that the docs on the website should be updated to reflect this. However this seems strange to me as an object of type VuetifyParsedThemeItem has the same properties as the BaseColor interface. It also works with just colors.pink, despite the error.

[MajesticPotatoe]

Ah, sorry, early morning. Seems colors.pink should work, didn't see it in the example there, and just poking at possible causes. Best guess could be a typing issue, given it still works.

full error I get is

Argument of type '{ theme: { themes: { light: { primary: Color; }; }; }; }' is not assignable to parameter of type 'Partial<UserVuetifyPreset>'.
The types of 'theme.themes.light.primary' are incompatible between these types.                                          
Type 'Color' is not assignable to type 'VuetifyThemeItem'.                                                               
Type 'Color' is not assignable to type 'Partial<VuetifyParsedThemeItem>'.                                                
Index signature is missing in type 'Color'.  

[hojlind]

Yes, same error here. If i add
[name: string]: string
in both of the BaseColor and Color interfaces it works without giving any errors. I am very new to typescript but as i understand it that is the index signatures that it is missing.

[MajesticPotatoe]

when i do primary: colors.pink.base the error goes away. seems that the VuetifyThemeItem interface is only expecting strings or numbers,

setting it to export type VuetifyThemeItem = Partial<VuetifyParsedThemeItem> | string | number | object | undefined resolves as well

easy fix, theme.d.ts L78

edit: added wrong line

[hojlind]

According to the sourcecode the VuetifyThemeItem accepts one of the following:
export type VuetifyThemeItem = Partial<VuetifyParsedThemeItem> | string | number | undefined

[MajesticPotatoe]

Correct. By using the value colors.pink (which is acceptable) you are feeding it an object, which doesn't match the types its expecting which throws the error. (sorry copied the wrong line)

[MajesticPotatoe]

Though technically Partial<VuetifyParsedThemeItem> should be valid in this case (and seems to be if you manually create the object). unless colors.pink is not being typed as such (which i believe is being typed as BaseColor).

[hojlind]

I believe colors.pink is being typed as Color which extends from BaseColor and add accents, but that should let it work as well i suppose.

[MajesticPotatoe]

I will poke with the rest of the team on the best way to tackle this, should be relatively easy, and seems like it can be fixed in a couple different ways. I'm not super fluent in TS so there may be a reason it was done this way, or just a oversight. Thanks for reporting it 👍

[RobbinBaauw]

A workaround would be

  theme: {
    themes: {
      light: {
        primary: { ...colors.pink }
      }
    }
  }

(see https://github.com/microsoft/TypeScript/issues/15300#issuecomment-371353444)