Typescript中未定义的不可分配问题答案

【问题标题】：undefined not assignable issue in TypescriptTypescript中未定义的不可分配问题
【发布时间】：2020-07-29 15:46:54
【问题描述】：

我有一个接口Employee：

export interface Employee {
  firstName: string;
  lastName: string;
}

我正在尝试将类型 Employee 的元素推入一个数组，如下所示：

  let allEmployees: Employee[] = [];
  allEmployees = emp.data?.map((employee) => {
    return { firstName: employee.firstName, lastName: employee.lastName }
  });

我收到以下打字稿编译时错误：

type 'undefined' is not assignable to type 'Employee[]'

我使用 .map 函数来返回数组的最终值。我该如何解决这个问题？

谢谢

【问题讨论】：

请考虑编辑问题中的代码以构成一个minimal reproducible example，该minimal reproducible example 可以放入像The TS Playground 这样的独立IDE 中，以便其他人可以自己查看问题。 emp 的类型在这里很重要。我假设它的data 属性本身可能是undefined，因此可选的链接运算符emp.data?.map() 可能会将allEmployees 设置为undefined，而无需运行map()。另外，我没有看到你试图推动任何元素。相反，您正在尝试重新分配allEmployees。你想试试push()吗？
推送方法确实有效。但我想重用 .map 函数。

标签： javascript typescript interface

【解决方案1】：

emp.data? 中的? 表示data 是可选的，在emp 中可能不存在，它告诉打字稿不要通过链式函数，即map。所以你的分配可以返回undefined或Employee[]，不能分配给allEmployees。

【讨论】：

许多可能的修复方法之一：let allEmployes = (emp.data ?? []).map(/*...*/);

【解决方案2】：

这是因为emp.data? 也可能返回void 0。这就是为什么你不必使用proposal-optional-chaining，只需检查如下：

allEmployees = emp.data ? emp.data.map((employee) => {
  return { firstName: employee.firstName, lastName: employee.lastName }
}) : [];

【讨论】：