TypeScript创建对象并赋值报错：Cannot set property 'X' of undefined

嘿，我来帮你搞定这个头疼的问题！你遇到的这个错误，说白了就是你打算赋值的对象（或者它里面的某个嵌套属性）还处于undefined状态——就像你想往一个还没买的空盒子里放东西，自然行不通。

我整理了几种最常见的错误场景和对应的解决方案，你可以对照自己的代码看看是哪种情况：

场景1：只声明了接口类型，却没创建对象实例 #

很多新手会犯这个错：只定义了接口，然后直接给变量的属性赋值，但变量本身根本没被初始化。比如：

interface Book {
  bookTitle: string;
}

let myBook: Book; // 这里只是告诉TS变量的类型，myBook实际还是undefined
myBook.bookTitle = "TypeScript实战"; // 直接报错！

解决方案：先初始化对象再赋值 #

有几种方式可以搞定：

• 方式1：用对象字面量直接初始化
  这是最直观的方式，直接创建符合接口结构的对象：

  let myBook: Book = { bookTitle: "" };
  myBook.bookTitle = "TypeScript实战";
  

• 方式2：类型断言+空对象（适合需要先声明后赋值的场景）
  如果需要先声明变量，之后再填充属性，可以用类型断言告诉TS这个空对象符合接口类型：

  let myBook: Book = {} as Book;
  myBook.bookTitle = "TypeScript实战";
  

• 方式3：用类实现接口（适合复杂对象）
  如果你的对象需要更多方法或者逻辑，用类来实现接口会更清晰：

  class BookClass implements Book {
    bookTitle: string;
    // 构造函数初始化属性
    constructor(initialTitle: string) {
      this.bookTitle = initialTitle;
    }
  }
  let myBook = new BookClass("TypeScript实战");
  

场景2：嵌套对象未初始化 #

如果你的接口包含嵌套对象，只初始化外层对象是不够的，嵌套的内层对象也得先初始化。比如：

interface Book {
  detail: {
    bookTitle: string;
    author: string;
  };
}

let myBook: Book = {} as Book;
myBook.detail.bookTitle = "TypeScript实战"; // 报错！因为myBook.detail还是undefined

解决方案：先初始化嵌套对象 #

// 先初始化内层对象
let myBook: Book = { detail: {} } as Book;
myBook.detail.bookTitle = "TypeScript实战";

// 或者一步到位直接创建完整对象
let myBook: Book = {
  detail: {
    bookTitle: "TypeScript实战",
    author: "张三"
  }
};

额外小技巧：用可选链规避错误（非根本解决，但应急有用） #

如果你的业务场景允许属性可能不存在，可以用可选链操作符?.来避免报错，同时结合空值合并运算符??设置默认值：

// 不会报错，结果是undefined
console.log(myBook?.detail?.bookTitle);

// 设置默认值
const bookTitle = myBook?.detail?.bookTitle ?? "默认书名";

核心总结一下：不管是外层对象还是嵌套对象，一定要确保你要赋值的那个对象已经被初始化为一个实际的对象（不是undefined），再去给它的属性赋值。你之前看的那些方案可能没精准匹配你的错误场景，对照上面的情况调整应该就能解决啦！

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