Angular中TypeScript类型转换与计算属性问题求助

问题描述 #

尝试将ClassA实例转换为继承它的ClassB类型，以此获取ClassB的计算属性，但转换后依然只能拿到ClassA的属性，代码示例如下：

export class ClassA {
  title = 'a1';
}

export class ClassB extends ClassA {
  foo(){
    return this.title+'a';
  }
  someProperty = this.foo();
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'classExtenstionTest';
  x = new ClassA;
  xx= this.x as ClassB; // 这样做可行吗？

 ngOnInit() {
  console.log(this.x); // 返回ClassA的属性
  console.log(this.xx); // 同样只返回ClassA的属性，为什么？
  }
}  

原因分析 #

• 类型断言不改变运行时对象：this.x as ClassB只是TypeScript编译阶段的类型提示，仅告诉编译器“把x当作ClassB类型处理”，但运行时x依然是ClassA的实例，不存在ClassB定义的foo方法和someProperty属性。
• 子类属性未执行初始化：ClassB的someProperty是在实例化时通过foo()计算生成的，ClassA实例不会触发ClassB的构造逻辑，自然不会生成该属性。

解决方法 #

方法1：修改子类构造函数接收父类实例 #

让ClassB的构造函数接收ClassA实例，复制其属性并完成自身初始化：

export class ClassB extends ClassA {
  constructor(classA: ClassA) {
    super();
    // 复制ClassA的所有属性到当前实例
    Object.assign(this, classA);
  }

  foo() {
    return this.title + 'a';
  }

  someProperty = this.foo();
}

// 在组件中使用
xx = new ClassB(this.x);

方法2：使用工厂函数转换 #

如果不想修改类的构造逻辑，用工厂函数封装转换过程：

function convertToClassB(classA: ClassA): ClassB {
  const classBInstance = new ClassB();
  // 复制父类属性
  Object.assign(classBInstance, classA);
  // 重新计算子类的计算属性
  classBInstance.someProperty = classBInstance.foo();
  return classBInstance;
}

// 在组件中使用
xx = convertToClassB(this.x);

方法3：子类静态方法实现转换 #

把转换逻辑封装在ClassB的静态方法中，更符合类的封装原则：

export class ClassB extends ClassA {
  foo() {
    return this.title + 'a';
  }

  someProperty = this.foo();

  static fromClassA(classA: ClassA): ClassB {
    const instance = new ClassB();
    Object.assign(instance, classA);
    instance.someProperty = instance.foo();
    return instance;
  }
}

// 在组件中使用
xx = ClassB.fromClassA(this.x);

内容的提问来源于stack exchange，提问作者Alex K