Vue+TypeScript 如何为返回CSS样式的对象字面量添加类型标注？

这个TypeScript报错是Vue Options API的类型自动推导失效导致的，TS无法识别你在data中声明的baseWidth属性，你可以通过定义接口解决，也有更简便的处理方案。

方案1：使用Vue.extend自动推导类型（优先推荐） #

直接用Vue.extend包裹整个组件定义，Vue内置的类型系统会自动推导props、data、computed的所有属性类型，无需额外手写接口：

import Vue from 'vue'

export default Vue.extend({
  props: {
    initWidth: {
      type: Number,
      default: 300,
    }
  },
  data() {
    return {
      baseWidth: this.initWidth
    }
  },
  computed: {
    cssProps() {
      return {
        '--baseWidth': `${this.baseWidth}px`,
      }
    }
  }
})

方案2：手动定义组件实例接口 #

如果你不想使用Vue.extend，可以手动声明组件实例的类型接口，给computed方法指定this类型即可：

import Vue from 'vue'

// 定义组件实例的类型接口，声明所有挂载到this上的属性
interface ComponentInstance extends Vue {
  initWidth: number
  baseWidth: number
  cssProps: Record<'--baseWidth', string>
}

export default {
  props: {
    initWidth: {
      type: Number,
      default: 300,
    }
  },
  data() {
    return {
      baseWidth: this.initWidth
    }
  },
  computed: {
    // 给cssProps方法指定this的类型
    cssProps(this: ComponentInstance) {
      return {
        '--baseWidth': `${this.baseWidth}px`,
      }
    }
  }
} as unknown as Vue.ComponentOptions<ComponentInstance>

优化建议 #

你当前的场景下不需要在data中额外声明baseWidth，直接在computed中使用props的initWidth即可，去掉冗余的data声明也可以直接规避这个类型问题，代码更精简：

computed: {
  cssProps() {
    return {
      '--baseWidth': `${this.initWidth}px`,
    }
  }
}

内容的提问来源于stack exchange，提问作者user15909643