打字稿错误：对象文字只能指定已知属性，并且“路由器”类型不存在“组件选项<Vue

Question

我刚刚将 typescript 添加到我现有的 vuejs 应用程序中，我收到了 Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>' 错误。我的理解是我不需要安装@types/vue 或@types/vue-router 来解决这个问题。 有人可以建议新手吗？

~\src\router.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({............
});
export default router;

堆栈跟踪：

ERROR in ~/src/main.ts(126,10):
126:10 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
    124 | 
    125 | Vue.config.productionTip = false;
  > 126 | new Vue({router, store, i18n, acl, render: h => h(App)}).$mount('#app');
        |          ^
Version: typescript 3.8.3

package.json：

{
  "name": "video-audio-transcription",
  "version": "4.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^0.2.3",
    "@chenfengyuan/vue-countdown": "^1.1.2",
    "@react-native-community/netinfo": "^5.5.0",
    "@syncfusion/ej2-vue-grids": "^18.1.46",
    "@types/chart.js": "^2.9.20",
    "@types/vue2-hammer": "^2.1.0",
    "ag-grid-community": "^21.0.1",
    "ag-grid-vue": "^21.0.1",
    "algoliasearch": "^3.33.0",
    "apexcharts": "^3.6.12",
    "aws-amplify": "^3.0.9",
    "axios": "^0.19.0",
    "chart.js": "^2.8.0",
    "core-js": "2.6.5",
    "echarts": "^4.2.1",
    "file-saver": "2.0.1",
    "firebase": "^6.0.4",
    "instantsearch.css": "^7.3.1",
    "jsonwebtoken": "^8.5.1",
    "material-icons": "^0.3.1",
    "perfect-scrollbar": "^1.4.0",
    "postcss-rtl": "^1.5.0",
    "prismjs": "^1.16.0",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.11",
    "vue-acl": "4.0.7",
    "vue-apexcharts": "^1.3.5",
    "vue-awesome-swiper": "^3.1.3",
    "vue-backtotop": "^1.6.1",
    "vue-chartjs": "^3.4.2",
    "vue-class-component": "^7.2.3",
    "vue-clipboard2": "^0.3.0",
    "vue-context": "4.0.0",
    "vue-echarts": "^4.0.3",
    "vue-feather-icons": "^5.0.0",
    "vue-flatpickr-component": "^8.1.2",
    "vue-form-wizard": "^0.8.4",
    "vue-fullcalendar": "^1.0.9",
    "vue-i18n": "^8.11.2",
    "vue-instantsearch": "^2.2.1",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-prism-component": "^1.1.1",
    "vue-property-decorator": "^8.4.1",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.6",
    "vue-select": "^3.1.0",
    "vue-simple-calendar": "^4.2.2",
    "vue-simple-suggest": "^1.9.5",
    "vue-star-rating": "^1.6.1",
    "vue-tour": "^1.1.0",
    "vue-tree-halower": "^1.8.0",
    "vue-video-player": "^5.0.2",
    "vue2-google-maps": "^0.10.6",
    "vue2-hammer": "^2.1.2",
    "vuedraggable": "^2.21.0",
    "vuejs-datepicker": "^1.5.4",
    "vuesax": "3.11.1",
    "vuex": "^3.1.1",
    "xlsx": "^0.15.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-typescript": "^4.3.1",
    "@vue/cli-plugin-unit-jest": "^4.3.1",
    "@vue/cli-service": "^3.7.0",
    "@vue/test-utils": "^1.0.0-beta.31",
    "axios-mock-adapter": "^1.17.0",
    "jest-localstorage-mock": "^2.4.2",
    "node-sass": "^4.12.0",
    "purgecss": "^1.3.0",
    "sass-loader": "^7.1.0",
    "script-loader": "0.7.2",
    "tailwindcss": "^1.0.1",
    "typescript": "^3.5.2",
    "vue-template-compiler": "^2.6.10"
  },
  "jest": {
    "setupFiles": [
      "jest-localstorage-mock"
    ],
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
  }
}

Answer 1

只需在您的 tsconfig.js 中添加 "types": [] 数组，其中包含您下载的 Vue、VueRouter 等类型的路径。 就我而言，它看起来像这样：

...
"types": [
  "./types/vue/",
  "./types/vue-router/"
],
...

我几天前开始使用 Typescript + Vue，希望能有所帮助。