TypeScript错误：null无法赋值给Ingredient类型求助

你的问题核心是State接口中editedIngredient的类型定义和初始值不匹配：接口声明它必须是Ingredient类型，但你给了null，TypeScript会严格检查这种类型不一致的情况。有两种常见修复方式：

方案1：允许editedIngredient为null（推荐） #

如果业务逻辑中存在“没有选中要编辑的食材”的场景，直接修改State接口，让editedIngredient的类型包含null：

export interface State {
  ingredients: Ingredient[];
  editedIngredient: Ingredient | null; // 添加|null，允许空值
  editedIngredientIndex: number;
}

修改后初始状态的null就符合类型要求了。后续使用editedIngredient时，记得做空值检查，比如：

// 使用前判断是否为null
if (state.editedIngredient) {
  console.log(state.editedIngredient.name);
}

// 或者用可选链操作符
console.log(state.editedIngredient?.name);

方案2：给初始状态一个空的Ingredient实例 #

如果业务要求editedIngredient永远不能为null，可以给初始状态赋值一个空的Ingredient对象：

const initialState: State = {
  ingredients: [new Ingredient('Apples', 5), new Ingredient('Tomatoes', 4)],
  editedIngredient: new Ingredient('', 0), // 空实例替代null
  editedIngredientIndex: -1,
};

这种方式适合必须存在默认编辑食材的场景，但要注意后续业务逻辑是否需要处理空名称/数量的情况。

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