Version

3.1.5

Reproduction link

codesandbox.io

Environment info

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: 94.0.992.50
    Firefox: 93.0
    Safari: 14.1.2
  npmPackages:
    @cypress/vue: 3.0.1 => 3.0.1
    @intlify/vue-devtools:  9.1.6
    @storybook/vue3: ^6.3.6 => 6.3.6
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli: ^4.5.8 => 4.5.13
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router: ~4.5.0 => 4.5.13
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.13
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.13
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/cli-ui:  4.5.13
    @vue/cli-ui-addon-webpack:  4.5.13
    @vue/cli-ui-addon-widgets:  4.5.13
    @vue/compiler-core:  3.1.4 (3.1.5)
    @vue/compiler-dom:  3.1.4 (3.1.5)
    @vue/compiler-sfc: ~3.1 => 3.1.5 (3.1.4)
    @vue/compiler-ssr:  3.1.5 (3.1.4)
    @vue/component-compiler-utils:  3.2.2
    @vue/devtools-api:  6.0.0-beta.15
    @vue/eslint-config-typescript: ^7.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.1.5
    @vue/runtime-core:  3.1.5
    @vue/runtime-dom:  3.1.5
    @vue/shared:  3.1.5 (3.1.4)
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.10
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0 => 7.19.1
    jest-serializer-vue:  2.0.2
    typescript: ~4.1 => 4.1.6
    vue: ~3.1 => 3.1.5 (2.6.14)
    vue-axios: ^3.0.1 => 3.2.4
    vue-codemod:  0.0.5
    vue-docgen-api:  4.40.0
    vue-docgen-loader:  1.5.0
    vue-eslint-parser:  7.8.0 (7.11.0)
    vue-gtag-next: ^1.14.0 => 1.14.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^9.0.0-rc.7 => 9.1.6
    vue-inbrowser-compiler-utils:  4.40.0
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.10 (3.0.7)
    vue-loader: ^16.2.0 => 16.3.0 (15.9.7)
    vue-router: ^4.0.0-0 => 4.0.10
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.0-0 => 4.0.2
    vuex-persistedstate: ^4.0.0-beta.1 => 4.0.0-beta.3
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

I can not reproduce the error on codesandbox, but after updating vue from 3.0.7 to 3.1.5 I have a type error on my computed property classes. You can find it on TestComponent.vue. When I move the code inside the computed to a normal ts file the error does not show, so it must be related to vue.

Here is the error.

TS2322: Type '{ name: string; id: number; classNumber: number; addSuggestion: { name: string; externalId: string; classNumber: number; readonly apiData: { externalId: string; classNumber: number; name: string; }; getGoodLike: () => GoodLike; }; readonly suggestions: { ...; }[]; addMatches: { ...; }; readonly matches: { ...; }[]; ...' is not assignable to type 'GoodClass[]'.
  Type '{ name: string; id: number; classNumber: number; addSuggestion: { name: string; externalId: string; classNumber: number; readonly apiData: { externalId: string; classNumber: number; name: string; }; getGoodLike: () => GoodLike; }; readonly suggestions: { ...; }[]; addMatches: { ...; }; readonly matches: { ...; }[]; }' is missing the following properties from type 'GoodClass': _name, _id, _classNumber, _suggestions, _matches
    20 |     classes(): GoodClass[] {
    21 |       if (!this.showAll) {
  > 22 |         return this.goodsResult.classes.slice(0, NB_CLASS_DISPLAY);
       |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    23 |       }
    24 |
    25 |       return this.goodsResult.classes;

ERROR in src/components/goods-view/good-search.vue:25:7
TS2322: Type '{ name: string; id: number; classNumber: number; addSuggestion: { name: string; externalId: string; classNumber: number; readonly apiData: { externalId: string; classNumber: number; name: string; }; getGoodLike: () => GoodLike; }; readonly suggestions: { ...; }[]; addMatches: { ...; }; readonly matches: { ...; }[]; ...' is not assignable to type 'GoodClass[]'.
    23 |       }
    24 |
  > 25 |       return this.goodsResult.classes;
       |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    26 |     },
    27 |   },
    28 | });

I copied the config of my project in the codesandbox

What is expected?

The type should be assignable

What is actually happening?

type is not assignable

I'm not sure if it has directly something to do with vue, or something with vue-loader, vue-cli or compiler-sfc.

Thanks for your help

Next time you should read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Maybe it's about the readonly properties but this should be asked in the forum or the chat. Open a new issue with a boiled down reproduction if you manage to reproduce it.