Typescript: Interface 'NuxtApp' incorrectly extends interface 'Vue' (typescript + Element-UI)

[dclovec]

Version

v2.12.2

Reproduction link

https://jsbin.com/?html,output

Steps to reproduce

once I create a new nuxt.js project(typescript + Element-UI) and then run it, it's going wrong. Development and build are the same failure.

What is expected ?

no failure found.

What is actually happening?

nuxt:typescript 09:49:56rojects/test/node_modules/@nuxt/types/app/index.d.ts(119,18):
119:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
Types of property '$loading' are incompatible.
Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
Type 'DefaultNuxtLoading' provides no match for the signature '(options: LoadingServiceOptions): ElLoadingComponent'.

export interface NuxtApp extends Vue {
^
$options: NuxtAppOptions
$loading: NuxtLoading
context: Context

_{This bug report is available on Nuxt community (#c10545)}

[infostatus]

Check here:
https://github.com/ElemeFE/element/issues/17329

[dclovec]

tsconfig.json: add "skipLibCheck: true" into compilerOptions

[pi0]

/cc @kevinmarrec

[kevinmarrec]

Duplicate of #49

See https://github.com/nuxt/typescript/issues/49#issuecomment-562945877

There's unfortunately nothing we can do, you may find workaround in the related issue.

From my POV it's not directly TypeScript issue but overall 2 frameworks setting a different $loading property on Vue instances. And as both are providing typings for it, it's buggy.

Overall I think it's component library fault (element, buefy, ...) cause they are 3rd parties, Nuxt isn't. Vuetify for example doesn't have this problem cause they namespaced everything in $vuetify object.

It should have been $element.loading or something similar.