TypeScript可选链示例解析：为何显示No yard及如何展示庭院面积

一、为什么会显示“No yard” #

• 你的home变量仅定义了sqft属性，完全没有声明yard属性：

  let home: House = { sqft: 500 }
  

• House接口中yard是可选属性（后缀?标记），所以上述home是符合接口规范的合法变量。
• 函数里的house.yard?.sqft是TypeScript的可选链操作符，逻辑是：
  • 若house.yard存在（不是null/undefined），则正常访问其sqft属性；
  • 若house.yard不存在（比如你的home没有这个属性，此时house.yard为undefined），可选链会直接返回undefined，避免抛出“无法访问未定义属性”的错误。
• 最终yardSize的值为undefined，触发if (yardSize === undefined)分支，打印“No yard”。

二、如何让它显示“Yard is 500 sqft” #

只需要给House实例添加完整的yard属性即可，有两种常用方式：

方式1：修改现有home变量 #

let home: House = { 
  sqft: 500,
  yard: { sqft: 500 } // 新增yard属性及内部的sqft值
}
printYardSize(home);

方式2：创建带yard的新实例传入函数 #

const houseWithYard: House = {
  sqft: 800,
  yard: { sqft: 500 }
}
printYardSize(houseWithYard);

此时house.yard存在，可选链会正常获取到500，进入else分支打印目标内容。

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