为何ESLint对OptionPanel联合类型报错？类型声明与赋值问题

第一个错误：缺少CalcOptionPanel所需的calc属性 #

问题核心是你没有通过type字面量属性明确告诉TypeScript当前newOption属于联合类型中的哪一个具体子类型。

你的三个子类型都通过type字段（'input'/'select'/'calc'）做了类型区分，这是TypeScript识别联合成员的关键标识。当你声明const newOption: OptionPanel却未提供type属性时，TypeScript无法判定它匹配哪一个子类型，会尝试检查该值是否符合任意成员的结构：

• 匹配InputOptionPanel需要type: 'input'，缺失；
• 匹配SelectOptionPanel需要type: 'select'，缺失；
• 匹配CalcOptionPanel需要type: 'calc'和calc属性，同样缺失。

此时TypeScript会抛出“缺少calc属性”的错误（这是它尝试匹配CalcOptionPanel时发现的缺失项），本质是你的对象不符合任何一个子类型的结构要求。

第二个错误：OptionPanel类型不存在list属性 #

TypeScript对联合类型的属性访问有严格规则：只有所有联合成员共有的属性才能直接访问。list仅属于SelectOptionPanel，InputOptionPanel和CalcOptionPanel都没有这个属性，因此直接访问newOption.list会触发报错。

要访问list，必须先通过类型守卫让TypeScript确认当前实例是SelectOptionPanel，示例代码如下：

if (newOption.type === 'select') {
  // 此处TypeScript会自动推断newOption为SelectOptionPanel，允许访问list
  console.log(newOption.list);
}

正确的实例声明方式 #

要创建合法的OptionPanel实例，必须明确指定type属性，让TypeScript匹配对应子类型：

// 创建Select类型实例
const newSelectOption: OptionPanel = {
  _id: ...,
  required: true,
  value: "",
  group: "",
  title: "",
  optionGroup_id: undefined,
  position: 0,
  editable: true,
  type: 'select', // 必须指定type
  list: []
};

// 创建Calc类型实例
const newCalcOption: OptionPanel = {
  _id: ...,
  required: true,
  value: "",
  group: "",
  title: "",
  optionGroup_id: undefined,
  position: 0,
  editable: true,
  type: 'calc', // 必须指定type
  calc: ...
};

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