简体   繁体   English

打字稿。 如何指定对象文字属性的子集类型?

[英]Typescript. How to specify a type of a subset of object literal properties?

Specify a type as in 'has property of this type' but may have other properties that we don't care about. 在“具有此类型的属性”中指定一种类型,但可能具有我们不关心的其他属性。

I have the two interfaces: 我有两个界面:

interface IForm {
 form: {
   name: string;
   email: string;
   picture: File | null;
 }
}

and a sub interface 和一个子界面

interface IUpload {
 form {
   picture: File | null;
 }
}

How would I specify in the IUpload interface that the form variable should not be that exactly, but rather just have this field, so that the extends relationship would work in this case. 我将如何在IUpload接口中指定form变量不应该完全相同,而应具有该字段,以便在这种情况下extends关系可以工作。 IForm extends IUpload ? IForm extends IUpload

Sorry if I didn't formulate the question correctly. 抱歉,如果我没有正确提出问题。 Thanks in advance! 提前致谢!

I think this might work for you: 我认为这可能对您有用:

interface IForm {
  name: string;
  email: string;
  picture: File | null;
}

Then in your IUpload: 然后在您的IUpload中:

interface IUpload extends Partial<IForm> {
  other: things;
}

You're good as it is, I just completed your code and corrected a few typos :) IForm can extend IUpload as it has the picture property. 您的状态很好,我刚刚完成了代码,并纠正了一些错字:) IForm可以扩展IUpload因为它具有picture属性。

interface IForm extends IUpload {
    form: {
        name: string;
        email: string;
        picture: File | null;
    }
}

export interface IUpload {
    form:
    {
        picture: File | null;
    }
}

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&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'错误。 我的理解是我不需要安装@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&lt;Vue, object, object, object, never&gt; | undefined): CombinedVueInstance&lt;Vue, object, object, object, Record&lt;...&gt;&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps&lt;Vue, object, object, object, never&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps&lt;Vue, object, object, object, never&gt;'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt; | undefined): CombinedVueInstance&lt;Vue, object, object, object, Record&lt;...&gt;&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt;'. Overload 3 of 3, '(options?: ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt; | undefined): CombinedVueInstance&lt;...&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'. 124 | 125 | Vue.config.productionTip = false; &gt; 126 | new Vue({router, store, i18n, acl, render: h =&gt; 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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 类型在Typescript中是结构性的。 对象文字的问题 - Types are structural in Typescript. Problem with object literal typescript 如何键入字符串文字数组的子集 - typescript how to type the subset of a string literal array TypeScript中对象文字符号内的函数。 为什么`this`上下文是`any`类型的? - Functions within object literal notation in TypeScript. Why `this` context is of type `any`? 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&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'错误。 我的理解是我不需要安装@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&lt;Vue, object, object, object, never&gt; | undefined): CombinedVueInstance&lt;Vue, object, object, object, Record&lt;...&gt;&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps&lt;Vue, object, object, object, never&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps&lt;Vue, object, object, object, never&gt;'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt; | undefined): CombinedVueInstance&lt;Vue, object, object, object, Record&lt;...&gt;&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithRecordProps&lt;Vue, object, object, object, object&gt;'. Overload 3 of 3, '(options?: ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt; | undefined): CombinedVueInstance&lt;...&gt;', gave the following error. Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) =&gt; VNode; }' is not assignable to parameter of type 'ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'. Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions&lt;Vue, DefaultData&lt;Vue&gt;, DefaultMethods&lt;Vue&gt;, DefaultComputed, PropsDefinition&lt;Record&lt;string, any&gt;&gt;, Record&lt;...&gt;&gt;'. 124 | 125 | Vue.config.productionTip = false; &gt; 126 | new Vue({router, store, i18n, acl, render: h =&gt; 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 TypeScript错误:对象文字只能指定已知属性,并且“DeepPartial”类型中不存在“...” <Document> “ - TypeScript Error: Object literal may only specify known properties, and '…' does not exist in type 'DeepPartial<Document>' 对象相等比较打字稿。 无法将对象属性应用于泛型类型 - Object equality comparison typescript. Cannot apply Object properties to generic type 打字稿:对象文字只能指定已知属性 - Typescript: Object literal may only specify known properties Object 文字只能指定已知属性 Angular/TypeScript - Object literal may only specify known properties Angular/TypeScript 面对 Object 文字可能只指定 React Typescript 中的已知属性 - Faced Object literal may only specify known properties in React Typescript Typescript object 文字可能只指定已知属性错误 - Typescript object literal may only specify known properties error
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM