TypeScript解决非可选属性被标记为可选的类型校验问题

方案一：提前定义完整接口 + 类型断言初始化 #

这种方式既能保留Item.的智能提示，又能让TypeScript明确所有方法最终都会存在，彻底避免可选属性带来的报错。

// 定义包含所有方法的完整Item接口
interface Item {
  render(): number;
  buy(): string;
  sell(): string;
}

// 用类型断言告诉TS：这个空对象最终会符合Item接口的所有要求
const Item = {} as Item;

// 实现render方法
Item.render = function () {
  return 1;
};

// 实现buy方法，此时调用render不会触发类型报错
Item.buy = function () {
  Item.render();
  return "bought";
};

// 实现sell方法
Item.sell = function () {
  Item.render();
  return "sold";
};

如果需要在其他文件给Item新增方法，只需在对应文件扩展接口并实现：

// 其他文件中扩展Item接口
interface Item {
  refund(): string;
}

// 给Item添加refund方法
Item.refund = function () {
  return "refunded";
};

方案二：分步扩展接口 + 调整实现顺序 #

如果不想提前定义完整接口，可以分步扩展Item接口，但要保证被依赖的方法先实现：

// 初始空接口
interface Item {}

const Item = {} as Item;

// 先扩展接口并实现render方法（标记为必选属性）
interface Item {
  render(): number;
}
Item.render = function () {
  return 1;
};

// 再扩展接口实现buy方法，此时TS已知道render存在
interface Item {
  buy(): string;
}
Item.buy = function () {
  Item.render();
  return "bought";
};

// 同理实现sell方法
interface Item {
  sell(): string;
}
Item.sell = function () {
  Item.render();
  return "sold";
};

临时应急方案：非空断言（不推荐长期使用） #

如果只是想快速跳过当前校验，可以用非空断言!强制告诉TS该属性一定存在：

Item.buy = function () {
  Item.render!(); // 用!跳过undefined校验
  return "bought";
};

注意：这种方式会绕过TS的类型检查，若后续render方法被意外删除，会导致运行时错误，仅建议临时调试使用。

问题根源说明 #

你之前把所有方法都标记为可选属性（?），是为了规避初始化空对象时的类型报错，但这会让TS认为这些方法可能不存在，因此调用时触发Cannot invoke an object which is possibly 'undefined'错误。而你的Item是单例对象，所有方法最终都会被实现，所以根本不需要把属性设为可选，通过上述方案让TS明确方法的存在性即可。

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