Angular中TypeScript嵌套类作为属性时如何给嵌套属性正确赋值

DevOps 小满

2026-10-6

错误原因

你定义的Profile类仅声明了surname属性的类型为Surname，未设置初始化逻辑，同理Surname类中的nickname属性也没有默认值。调用new Profile()生成实例时，surname属性默认是undefined，直接访问undefined的下属属性就会触发找不到属性的报错。另外你定义的Nickname类属性名是nickname，和你需要的结构里的myNickname不匹配，需要先修正。

解决方法

方案1：给类添加构造函数，初始化嵌套属性

先修正三个类的定义，新增构造函数逻辑：

nickname.ts

export class Nickname{
  // 修正属性名匹配目标结构
  myNickname: string;
  constructor(myNickname: string) {
    this.myNickname = myNickname;
  }
}

surname.ts

import {Nickname} from './nickname';
export class Surname{
  newName: string;
  nickname: Nickname;
  constructor(newName: string, nickname: Nickname) {
    this.newName = newName;
    this.nickname = nickname;
  }
}

profile.ts

import {Surname} from './surname';
export class Profile{
  name: any;
  surname: Surname;
  constructor(name: string, surname: Surname) {
    this.name = name;
    this.surname = surname;
  }
}

赋值时直接链式初始化即可：

public profile: Profile;
this.profile = new Profile(
  'Nameless',
  new Surname(
    'Unknown',
    new Nickname('SS.h77')
  )
);

方案2：不修改类定义，赋值前先初始化嵌套实例

如果不想改动原有类的结构，也可以在赋值前手动生成嵌套类的实例：

public profile: Profile;
this.profile= new Profile();
this.profile.name = 'Nameless';
// 先初始化surname实例
this.profile.surname = new Surname();
this.profile.surname.newName = 'Unknown';
// 再初始化nickname实例
this.profile.surname.nickname = new Nickname();
// 给nickname的对应属性赋值
this.profile.surname.nickname.myNickname = 'ss.hh7';