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

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说它是可选的。然而,当你这样做的时候:

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

你没有给它选择的余地。你需要在它上面有一个反映未定义类型的联合:

let name1 : string | undefined = person.name; //<<<No error here 

使用您的回答,我能够概述以下内容,基本上是一个接口,一个类和一个对象。我发现这种方法更简单,如果你不这样做也没关系。

// Interface
interface iPerson {
    fname? : string,
    age? : number,
    gender? : string,
    occupation? : string,
    get_person?: any
}

// Class Object
class Person implements iPerson {
    fname? : string;
    age? : number;
    gender? : string;
    occupation? : string;
    get_person?: any = function () {
        return this.fname;
    }
}

// Object literal
const person1 : Person = {
    fname : 'Steve',
    age : 8,
    gender : 'Male',
    occupation : 'IT'  
}

const p_name: string | undefined = person1.fname;

// Object instance 
const person2: Person = new Person();
person2.fname = 'Steve';
person2.age = 8;
person2.gender = 'Male';
person2.occupation = 'IT';

// Accessing the object literal (person1) and instance (person2)
console.log('person1 : ', p_name);
console.log('person2 : ', person2.get_person());

其他回答

试着事先找出实际值。如果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,
}

也有同样的问题。

我发现react-scrips添加了“strict”:true到tsconfig.json。

在我移除它之后,一切都很好。

Edit

需要警告的是,更改此属性意味着:

不再对潜在的运行时错误发出警告。

正如保罗在评论中指出的那样!谢谢!

只有在你完全理解它的影响时才使用"strict": false !

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

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

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

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

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

let name1: string = person.name;

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

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