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

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

如何避免这个错误呢?


当前回答

现在您可以使用这里的非空断言操作符,它正是用于您的用例的。

它告诉TypeScript,即使某些东西看起来可能是null,它也可以相信你它不是:

let name1:string = person.name!; 
//                            ^ note the exclamation mark here  

其他回答

根据您的定义,Person.name可以为空,但name1不能。 有两种情况:

Person.name从不为空

告诉编译器你确定名称不是空的使用!

let name1: string = person.name!;

Person.name可以为空

在case name为null时指定一个默认值

let name1: string = person.name ?? "default name";

如果你从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建议的“确定赋值断言操作符”:

let name1: string = person.name!;

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

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

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

如果你想拥有nullable属性,将你的接口更改为:

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

如果未定义不是这种情况,可以从属性名前面删除问号(?)。

  @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);
  }
}