Vue.js模块中如何初始化并使用复杂类型声明数据？

这不是TypeScript的语法问题，而是你混淆了类型注解和实例化的区别！

当你写currBudget: {} = { id: 20, name: 'Chris' };时，你不仅给currBudget加了类型注解（这里是匿名对象类型），还直接初始化了一个实际存在的对象——Vue能识别这个对象的属性并做响应式处理，所以一切正常。

但写currBudget: Budget;的时候，你只是告诉TypeScript：“这个变量的类型应该是Budget类的实例”，但并没有真正创建Budget的实例。运行时这个变量的值是undefined，当你试图访问它的id或name属性时，自然会出问题——因为undefined根本没有这些属性。

正确的做法：初始化Budget类的实例 #

你需要手动创建Budget类的实例，同时保留类型注解，这样TS能做类型检查，运行时也有实际的对象供Vue使用：

第一步：确保Budget类有默认值初始化

先确认你的Budget类已经设置了属性默认值，或者有带默认参数的构造函数：

// Budget.ts
export class Budget {
  // 直接给属性设默认值
  id: number = 20;
  name: string = 'Chris';

  // 或者用构造函数初始化（二选一即可）
  // constructor(id: number = 20, name: string = 'Chris') {
  //   this.id = id;
  //   this.name = name;
  // }
}

第二步：在Vue组件中实例化Budget

根据你使用的Vue API风格，选择对应的写法：

选项式API（Vue 2/Vue 3）

如果用的是选项式API（包括vue-property-decorator）：

import Budget from './Budget';

export default {
  data() {
    return {
      // 实例化Budget，同时TS会自动推导类型（也可以显式加注解）
      currBudget: new Budget()
    }
  }
}

// 如果你用vue-property-decorator
import { Component, Vue } from 'vue-property-decorator';
import Budget from './Budget';

@Component
export default class MyComponent extends Vue {
  currBudget: Budget = new Budget();
}

组合式API（Vue 3）

用组合式API的话，配合ref或reactive使用：

import { ref } from 'vue';
import Budget from './Budget';

export default {
  setup() {
    // 用ref包裹实例，确保属性响应式
    const currBudget = ref(new Budget());
    return { currBudget };
  }
}

额外提醒 #

如果你的Budget类有一些复杂的逻辑或方法，直接实例化后Vue会自动将它的属性转为响应式，但方法不会受响应式影响（这是正常的，因为方法不需要响应式追踪）。

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