当我将接口的任何属性设置为可选时,并将其成员分配给其他变量,如下所示:

interface Person {
  name?: string,
  age?: string,
  gender?: string,
  occupation?: string,
}

function getPerson() {
  let person = <Person>{name:"John"};
  return person;
}

let person: Person = getPerson();
let name1: string = person.name; // <<< Error here 

我得到如下错误:

TS2322: Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.

如何避免这个错误呢?


当前回答

一种更适合生产环境的处理方法是实际确保存在名称。假设这是一个由一组人参与的大型项目的最小示例,您不知道getPerson将来会发生怎样的变化。

if (!person.name) {
    throw new Error("Unexpected error: Missing name");
}

let name1: string = person.name;

或者,您可以将name1键入为字符串| undefined,并进一步处理未定义的情况。但是,最好尽早处理意外错误。

你也可以让TypeScript通过省略显式类型来推断类型:let name1 = person.name这仍然可以防止name1被重新分配为一个数字,例如。

其他回答

试着事先找出实际值。如果person有一个有效的名称,则将其赋值给name1,否则赋值为undefined。

let name1: string = (person.name) ? person.name : undefined;

在我的特定情况下发生在我身上的一件事(但它与这里问到的具体问题无关)是,我在文件中导入了错误的类型,因为类型被称为完全相同,但定义了不同的属性。

一旦我导入了正确的类型,所有的问题都消失了。

我希望这能帮助那些和我面临同样问题的人。

解决方案1:删除显式类型定义

因为getPerson已经返回了一个带有名称的Person,所以我们可以使用推断类型。

function getPerson(){
  let person = {name:"John"};
  return person;
}

let person = getPerson();

如果我们定义person: person,我们将丢失一条信息。我们知道getPerson返回一个具有非可选属性name的对象,但是将其描述为Person会使可选性恢复。

解决方案2:使用更精确的定义

type Require<T, K extends keyof T> = T & {
  [P in K]-?: T[P]
};

function getPerson() {
  let person = {name:"John"};
  return person;
}

let person: Require<Person, 'name'> = getPerson();
let name1:string = person.name;

解决方案3:重新设计界面

所有属性都是可选的形状称为弱类型,通常是设计不好的标志。如果我们将name作为必需属性,那么您的问题就解决了。

interface Person {
  name:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

我知道这有点晚了,但是除了yannick的答案,还有另一种方法可以使用!是将它转换为字符串,从而告诉TypeScript:我确定这是一个字符串,从而转换它。

let name1:string = person.name;//<<<Error here 

to

let name1:string = person.name as string;

这将使错误消失,但如果这不是一个字符串,你将得到一个运行时错误…这也是我们使用TypeScript来确保类型匹配并在编译时避免此类错误的原因之一。

从TypeScript 3.7开始,你可以使用空合并运算符??您可以将此特性视为在处理null或未定义时“退回”到默认值的一种方式

let name1:string = person.name ?? '';

的? ?当尝试使用默认值时,操作符可以替换||的使用,并且可以在处理不能使用||的布尔值、数字等时使用。

从TypeScript 4开始,你可以使用??=赋值运算符作为??= b是a = a的替代??b;