提问人：Alex K 提问时间：3/26/2023 更新时间：3/27/2023 访问量：131
TypeScript （Angular） 中具有计算属性的类型转换
type casting in typescript (angular) with calculated properties
问：
我正在尝试将计算属性添加到我（从服务器）获取的类型化对象数组中。
我构建了一个简化的例子，我认为它与我的情况相似：
在此示例中，我尝试使用 ClassA 的属性来累积属性并将其添加到 ClassB，当我拥有 ClassA 类型的对象时，我希望可以将它们转换为 ClassB，并且将计算所需的属性并将其添加到其中。
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; //can i do this?
ngOnInit() {
console.log(this.x);// return properties of class A
console.log(this.xx); //also returns properties of class A (and not ClassB), why?
}
}
但它似乎不起作用，我在铸造后无法获得 ClassB 所需的属性。 我对打字稿很陌生，任何帮助将不胜感激，谢谢！
答：
1赞
Robert Rendell
3/27/2023
#1
TypeScript 中的关键字不是按照您的想法行事。
转译器忽略类型检查而不是像 Java 中那样“强制转换”只是语法。
在 TypeScript 中更好的解释如下：https://stackoverflow.com/a/55781571/4529555asas
有许多不同的方法可以实现你想要的。
为什么不使用 ClassA 的构造函数并传递 ClassA 的具体实例呢？ClassB
export class ClassA {
title = 'a1';
}
export class ClassB extends ClassA {
constructor(objectA: ClassA) {
super();
this.title = objectA.title
}
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';
private x = new ClassA();
private xx= new ClassB(this.x);
ngOnInit() {
console.log(this.x);
console.log(this.xx);
}
}
评论
0赞
Alex K
3/27/2023
感谢您对“as”关键字的解释。但是如果我得到一个 ClassA 对象数组怎么办？我是否应该迭代 for 循环，为 ClassB 的每个成员提供一个 ClassA 的实例？还是有更好的方法？
1赞
Robert Rendell
3/27/2023
ClassB实际上是 的包装类。更好的方法是将服务器输出直接解析到 中，并删除对 in 的需求。是的，如果您想使用包装器，遍历每个对象实例似乎是要走的路。ClassAClassBClassAAppComponentClassA
1赞
AnwarMEQOR
3/27/2023
#2
将 x 转换为 ClassB 后看不到 ClassB 属性的原因是，即使在强制转换之后，xx 仍引用与 x 相同的对象。因此，xx 的属性将与 x 的属性相同。
若要创建具有与 x 相同属性的新 ClassB 对象，可以创建 ClassB 的新实例，并将其属性设置为与 x 的属性匹配。
请检查这个 ts playgr
评论
0赞
Robert Rendell
3/27/2023
没有工作ts playgr
0赞
AnwarMEQOR
3/27/2023
@RobertRendell对不起，我想我误解了这个问题。请查看更新后的答案。
评论