Vue / Typescript：如何键入返回css的对象文字？

Question

I am following the answer here ( Vue is it possible to use a prop for styling? (SCSS/ SASS) ) on how to use props in my css. I want to pass in initWidth as a prop but it has a default set to 300 . I am then setting an initial data to equal that prop so that a computed property can access it. I am getting a typescript error though Property 'baseWidth' does not exist on type '{ cssProps(): void; }'. Property 'baseWidth' does not exist on type '{ cssProps(): void; }'. . Would I need to make a new interface for this?

props: {
   initWidth: {
       type: Number,
       default: 300,
   }
},

data() {
    return {
       baseWidth: this.initWidth
    }
},

computed: {
    cssProps() {
       return {
           '--baseWidth': this.baseWidth + "px",
       }
    }
}

Answer 1

TypeScript support for the Options API has a known limitation that requires annotating return types on computed :

Because of the circular nature of Vue's declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed .

Since cssProps() has no annotation on its return type, the type inference for the component is broken, and TypeScript doesn't recognize this.baseWidth as a data property.

You could solve the problem by annotating the return type of cssProps() as Record<string,string> :

import Vue from 'vue'

export default Vue.extend({
  computed: {           👇
    cssProps(): Record<string, string> {
      return { /*...*/ }
    }
  }
})