Typescript:类型“string | undefined”不能赋值给类型“string”

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

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'.

如何避免这个错误呢?

当前回答

  @Input()employee!:string ;
announced:boolean=false;
confirmed:boolean=false;
task:string="<topshiriq yo'q>";

  constructor(private taskService:TaskService ) {
    taskService.taskAnnon$.subscribe(
      task => {
        this.task=task;
        this.announced=true;
        this.confirmed=false;
      }
    )
  }

  ngOnInit(): void {
  }
  confirm(){
   this.confirmed=true
   this.taskService.confirimTask(this.employee);
  }
}

2021-10-10 09:01:43

其他回答

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

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

2019-02-02 18:53:25

解决方案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,
}

2019-02-02 19:37:53

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

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

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

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

2020-02-22 15:57:19

如果你从getPerson函数中移除<Person>强制转换，那么TypeScript将足够聪明地检测到你返回的对象确实具有name属性。

所以只要转一下:

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;

成:

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

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

let person = getPerson();
let name1: string = person.name;

如果你不能这样做，那么你将不得不使用@yannick1976建议的“确定赋值断言操作符”: