个人中心
gpt4 book ai didi

javascript - typescript 错误 : Object literal may only specify known properties, 和 'router' 在“ComponentOptions
转载 作者：行者123 更新时间：2023-12-04 10:04:38 29 4
gpt4 key购买 nike

我刚刚在我现有的 vuejs 应用程序中添加了 typescript，我得到了一个 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"
  }
}

最佳答案

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

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

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

关于javascript - typescript 错误 : Object literal may only specify known properties, 和 'router' 在“ComponentOptions<Vue”类型中不存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61648568/

29 4 0

文章推荐： android - 如何在 Android Studio 上执行 "Recompile with -Xlint:unchecked for details"？
文章推荐： r - ggplot 指数平滑，在 exp 中调整参数
文章推荐： javascript - 如何使用 CSS 渐变在模拟时钟上突出显示 25 分钟？
文章推荐： javascript - 如何更改Vue中v-text-field占位符的字体颜色？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com