简体   繁体   English

使用 TypeScript 指定 object 的所有属性都是字符串类型的简单方法

[英]Simple approach to using TypeScript to specify all properties of object are of type string

I have the following ACTIONS object我有以下行动 object

const ACTIONS = {
  FETCH_ERROR: 'API fetch error',
  ACTIVATE_QUIZ: 'activate quiz',
  ACTIVATE_RESULTS: 'activate results',
  CHECK_ANSWER: 'check current answer',
  NEXT_QUESTION: 'go to next question',
  DEACTIVATE_QUIZ: 'deactivate quiz',
  UPDATE_DATA: 'update all the data',
  RESET_STATE: 'reset all the state'
}

And I want to specify that only properties of type string can be allowed in it.而且我想指定它只能允许类型为字符串的属性。 I have no idea of how to this, that's the reason I'm not proposing an attempt.我不知道该怎么做,这就是我不建议尝试的原因。

const ACTIONS: { [key: string]: string } = {
  FETCH_ERROR: 'API fetch error',
  ACTIVATE_QUIZ: 'activate quiz',
  ACTIVATE_RESULTS: 'activate results',
  CHECK_ANSWER: 'check current answer',
  NEXT_QUESTION: 'go to next question',
  DEACTIVATE_QUIZ: 'deactivate quiz',
  UPDATE_DATA: 'update all the data',
  RESET_STATE: 'reset all the state'
}

or use Record<keys, type> utility type:或使用Record<keys, type>实用程序类型:

const ACTIONS: Record<string, string> = {
  FETCH_ERROR: 'API fetch error',
  ACTIVATE_QUIZ: 'activate quiz',
  ACTIVATE_RESULTS: 'activate results',
  CHECK_ANSWER: 'check current answer',
  NEXT_QUESTION: 'go to next question',
  DEACTIVATE_QUIZ: 'deactivate quiz',
  UPDATE_DATA: 'update all the data',
  RESET_STATE: 'reset all the state'
}

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 动态返回对象属性类型 - Dynamic return type of object properties using TypeScript 如何使用属性指定组件的打字稿类型 - How to specify typescript type of a component with properties 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 - 在 object 使用别名解构时指定类型 - TypeScript - specify type while object destructuring with alias 在Typescript中,为什么对象不能在赋值时指定多余的属性,但是当它使用相同的接口传递给函数时呢? - In Typescript, why is it that an object cannot specify excess properties on assignment but it can when passed to a function, using same Interface? 打字稿:对象文字只能指定已知属性 - Typescript: Object literal may only specify known properties 动态访问的对象属性的Typescript类型推断 - Typescript type inference on dynamically accessed object properties 在TypeScript中使用变量属性名称定义对象类型 - Define Object type with variable properties name in TypeScript TypeScript:如何键入一个 object,其属性是稍后添加的? - TypeScript: How to type an object with properties that are added later? 打字稿-检查对象是否具有所有接口属性 - Typescript - Check an object has all interface properties
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM