时间戳

首页 > 解决方案 > Typescript 类无法访问对象的属性

typescript - Typescript 类无法访问对象的属性

问题描述

export class Person {
    name: string;
    age: string;
    details: {
      occupation: string;
      height: string;
      gender: string;
    };
}

这是我在 person.ts 中定义的一个类。

在另一个文件中，我试图为新人员对象中的所有属性分配一个值。我可以访问name，age但我不能在 setData() 方法中访问 details 对象中的任何属性，因为 details 对象是未定义的。代码看起来像这样。

import { Person} from '../Classes/person';

export class AnotherClass{

  private person1: Person;

  constructor() {
    this.person1= new Person();
  }

  private setData(){
    this.person1.details.occupation = "doctor";
  }

任何帮助表示赞赏。

标签： typescript

解决方案

您的打字稿类实际上只是定义了对象的预期形状。您目前没有为您的属性提供任何默认值，这就是发生这种情况的原因。有几种方法可以解决这个问题。

您可以将您的课程更新为：

export class Person {
    name: string;
    age: string;
    details: {
      occupation: string;
      height: string;
      gender: string;
    } = {
      occupation: '',
      height: '',
      gender: ''
    };
}

或者：

export class Person {
    name: string;
    age: string;
    details: {
      occupation?: string;
      height?: string;
      gender?: string;
    } = {};
}

第二个声明说一个人将有一个详细信息对象。details 对象具有三个可选属性，并且该对象的默认值为空对象。

您遇到的问题是 JavaScript 的默认值为undefined. 在 Typescript 中，您说您希望 details 属性是具有职业、身高和性别属性的对象。如果您创建一个 Person 对象并尝试为其分配其他内容，Typescript 编译器会报错。但是，Typescript 不会为您创建该对象的默认值。undefined如果没有另外指定，则默认值是正确的。现在，当您创建 Person 类的新实例时，当前分配给 details 属性的默认值是undefined. 然后，当您尝试为 on 上的属性分配值时undefined，运行时会不高兴。

上面的两个示例都为详细信息对象提供了默认值，从而消除了您遇到的问题。它们之间的区别在于分配给默认对象的每个属性的默认值。第一个将为每个属性分配一个空字符串，第二个将有一个没有这些属性的对象。

对于第一个示例，您必须为每个属性提供一个带有空字符串的对象，因为您在 Typescript 中声明每个属性都是必需的。通过?在第二个示例中添加 ，您声明每个属性都不是必需的。

默认对象不具有这些属性，但是在 JavaScript 中，当您尝试为对象上尚不存在的属性分配值时，JavaScript 将在该对象上创建属性并将值分配给它。

或者您可以在其他答案中提出建议并将对象分配给 details 属性。

推荐阅读