TypeScript动态添加对象键值报错：Cannot set property 'dots' of undefined

错误原因 #

1. 未初始化嵌套对象：遍历days时，marked[day]初始状态是undefined，直接给undefined的dots属性赋值会抛出类型错误。
2. 赋值语法错误：food, recycling是JavaScript逗号运算符，最终只会将recycling赋值给dots，无法得到预期的数组结构。

修正后的代码 #

// 定义类型替代any，提升代码类型安全性
interface DotItem {
  key: string;
  color: string;
}

interface MarkedDay {
  dots: DotItem[];
}

function addKeysAndValuesDynamically(days: string[]): Record<string, MarkedDay> {
  const marked: Record<string, MarkedDay> = {};
  const food: DotItem = { key: 'food', color: 'brown' };
  const recycling: DotItem = { key: 'recycling', color: 'green' };

  days.forEach((day: string) => {
    // 先为当前日期初始化嵌套对象
    marked[day] = {
      dots: [food, recycling] // 用数组包裹两个对象，匹配预期结构
    };
  });

  return marked;
}

const days: string[] = ['2024-08-21', '2024-08-22'];
const marked = addKeysAndValuesDynamically(days);
console.log('marked =', marked); // 直接传入对象打印，避免模板字符串拼接导致的[object Object]

关键修改点 #

• 为marked和内部对象添加明确的TypeScript类型，避免使用any，增强代码可读性和类型校验。
• 遍历每个日期时，先初始化marked[day]为包含dots数组的对象，再赋值属性。
• 用数组[food, recycling]替代逗号运算符，确保dots是预期的数组结构。
• 调整console.log的输出方式，保证能正确打印对象结构。

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