Subscribe on changes!

Typescript error when installing fresh Vue 3 (with router and store)

avatar
Nov 18th 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/serverless-smoke-nblju?file=/src/main.ts

Steps to reproduce

vue create project-name

? Please pick a preset: Manually select features  
? Check the features needed for your project: Choose Vue version, TS, Router, Vuex, CSS Pre-processors, Linter, Unit  
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)  
? Use class-style component syntax? No  
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes  
? Use history mode for router? (Requires proper server setup for index fallback in production) No  
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)  
? Pick a linter / formatter config: Standard  
? Pick additional lint features: Lint and fix on commit  
? Pick a unit testing solution: Jest  
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files  
? Save this as a preset for future projects? No  

cd project-name

What is expected?

No typescript errors

What is actually happening?

main.ts:6 shows the following typescript error:

Error:(6, 11) TS2345: Argument of type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
  Type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptions<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'.
    Type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}>'.
      Types of property 'computed' are incompatible.
        Type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }' is not assignable to type 'Record<string, ComputedGetter<any> | WritableComputedOptions<any>>'.
          Index signature is missing in type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }'.

The sandbox doesn't display the issue, but displays others. However, I have gone through each file and made sure it's what I have on local.

Here's a screenshot of the above error: https://i.stack.imgur.com/piYtI.png

Notes:

  • I've also tried upgrading typescript to 3.9.7, hoping this would go away.
  • In the sandbox I had to add "tslib": "2.0.3", to deps, otherwise it doesn't build.

No idea why the sandbox shows errors around the imports in ./main.ts, they don't show up on local.

Obviously, if you need more details, I'll provide.

Note the project is untouched. It's what one gets upon installing a fresh vue@next using @vue/cli

If it matters, I'm using WebStorm.

avatar
Nov 18th 2020

I tried on a fresh project and there are no TS errors.


Remember we have a forum and a Discord chat to ask questions!

avatar
Mar 15th 2021

Incorrect type description of TS loader when exporting, reference configuration:

// @workDir/typings.d.ts
/* declare module '*.vue' { // NOTE: 非ts-loader
    // const value: WebpackContent;
    import Vue from 'vue';

    export default Vue;
} */

declare module '*.vue' { // NOTE: ts-loader
    import { defineComponent } from 'vue';

    const component: ReturnType<typeof defineComponent>;
    export default component;
}