Typescript 错误：Object 字面量只能指定已知属性，并且“组件选项”类型中不存在“路由器” <vue< div><div id="text_translate"><p> 我刚刚将 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 来解决这个问题。 有人可以建议新手吗？</p><p> <strong>~\src\router.js</strong></p><pre> import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({............ }); export default router;</pre><p> <strong>堆栈跟踪：</strong></p><pre> 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</pre><p> <strong>package.json：</strong></p><pre> { "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" } }</pre> </div></vue<>
[英]Typescript Error: Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue
问题描述
I just added typescript to my existing vuejs application and I am getting a 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<...>>' error.
我刚刚将 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<...>>'错误。 My understanding is that I do not need to install @types/vue or @types/vue-router to fix this issue.我的理解是我不需要安装@types/vue 或@types/vue-router 来解决这个问题。 Can someone please advise a newbie?有人可以建议新手吗？
~\src\router.js ~\src\router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({............
});
export default router;
StackTrace:堆栈跟踪：
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: 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"
}
}
1 个解决方案
解决方案1
2 2020-05-09 21:21:03
Just add "types": [] array in your tsconfig.js with paths to your downloaded types for Vue , VueRouter , ect.只需在tsconfig.js中添加"types": []数组，其中包含您下载的Vue 、 VueRouter等类型的路径。 In my case it looks like this:就我而言，它看起来像这样：
...
"types": [
"./types/vue/",
"./types/vue-router/"
],
...
I started using Typescript + Vue few days ago so I hope it helps.几天前我开始使用 Typescript + Vue 所以我希望它有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
对象字面量只能指定已知的属性，并且类型“设置”中不存在“选择” - Object literal may only specify known properties, and 'select' does not exist in type 'Settings'
打字稿：对象文字只能指定已知属性 - Typescript: Object literal may only specify known properties
打字稿“对象文字可能只指定已知属性”对 Promise 返回函数没有影响 - Typescript "Object literal may only specify known properties" not effects on Promise return function
Mobx - 对象字面量只能指定已知属性 - Mobx - Object literal may only specify known properties
如何解决 Vetur/Vuelidate 错误“'验证'在'ComponentOptions 类型中不存在' - How can I resolve Vetur/Vuelidate error “'validate' does not exist in type 'ComponentOptions<Vue [etc.]”?
Typescript 确实分配给 object 类型定义中不存在的 object 属性 - Typescript does assign to an object properties that do not exist in the object type definition
TypeScript 从 react-router-dom 升级版本 4 useParams () 后出现错误 类型“{}”上不存在属性“sumParams” - TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'
打字稿：“对象”类型上不存在属性 - Typescript : Property does not exist on type 'object'
Typescript Vue 组件中的 Pinia 商店给出错误“'CreateComponentPublicInstance' 类型上不存在属性 'testStore'....” - Pinia store in Typescript Vue component gives error "Property 'testStore' does not exist on type 'CreateComponentPublicInstance'...."
使用 TypeScript 指定 object 的所有属性都是字符串类型的简单方法 - Simple approach to using TypeScript to specify all properties of object are of type string
相关标签