TS报错Types of parameters are incompatible参数类型不兼容排查

问题出在你用object[]作为recipes的类型标注：TS中内置的object类型仅代表“非原始值”，不携带任何具体属性的类型信息，因此recipes.map默认推导的回调参数类型是object，和你手动给recipe标注的带三个属性的类型不匹配，直接触发类型错误。

不要用模糊的object类型标注结构明确的业务对象，先定义好对应的数据结构类型，从入参、state层面就把类型标对，map回调里TS会自动推导单个元素类型，不需要手动给recipe加类型标注：

// 接口返回的原始菜谱结构
type RawRecipe = {
  recipe_id: string;
  title: string;
  image_url: string;
}
// 前端格式化后存在state里的菜谱结构
type RecipeItem = {
  id: string;
  title: string;
  image: string;
}

const [data, setData] = useState<RecipeItem[]>([]);

const dataHandle = (recipes: RawRecipe[]) => {
  setData(
    recipes.map(recipe => ({
      id: recipe.recipe_id,
      title: recipe.title,
      image: recipe.image_url
    }))
  );
};

这种写法下TS会自动做类型校验，如果原始数据少字段、或者格式化返回的字段不对，会直接在对应位置抛错，不需要写额外的类型断言。

如果你暂时没法修改recipes的入参类型（比如第三方库定义的类型就是object[]），可以在map回调内对单个元素做类型断言，这种写法会跳过TS校验，仅适合临时兼容用：

const [data, setData] = useState([] as object[]);

const dataHandle = (recipes: object[]) => {
  setData(
    recipes.map(recipe => {
      const rawRecipe = recipe as { recipe_id: string; title: string; image_url: string };
      return {
        id: rawRecipe.recipe_id,
        title: rawRecipe.title,
        image: rawRecipe.image_url
      };
    })
  );
};

注意：类型断言本质是让TS放弃类型检查，如果实际传入的recipe缺少你声明的三个属性，运行时会直接出现undefined问题，非必要不要用。

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