时间戳

首页 > 解决方案 > 为什么我不能投射使用 TypeScript 传播的对象的结果？

javascript - 为什么我不能投射使用 TypeScript 传播的对象的结果？

问题描述

不是重复的

我的问题与尝试查找对象的类型或类名无关。我的问题是关于将对象“强制转换”为类型——这源于对 TypeScript 及其工作原理的误解。这也与施法时使用对象传播有关。

原始问题

我想使用对象传播将数据从服务器映射到我的客户端上定义的类。我试图避免将数据传递给构造函数并使用循环映射每个属性，如此处所示。我尝试了以下方法：

//Data from server
var data = [
   {id: 1, name: "Book 1", authorName: "Author 1", 
     steps: [
       {id: 1, name: "Step 1"},
       {id: 2, name: "Step 2"}
     ]},
   {id: 2, name: "Book 2", authorName: "Author 2",
     steps: [
       {id: 1, name: "Step 1"},
       {id: 3, name: "Step 3"}
     ]}
 ];

 interface IBook {
    id: number;
    name: string;
    authorName: string;
    steps:IStep[];
 }

 interface IStep {
    id: number;
    name: string;
    status: string;
    processing: boolean;
 }

 class Book implements IBook {
   id: number;
   name: string;
   authorName: string;
   steps : Step[] ;
 }

 class Step implements IStep {
    id: number;
    name: string;
    status: string = "unknown";
    processed: boolean = false;
 }

 var list : Book[] = data.map(bitem=> {
      var book = <Book>{ ...bitem, ...new Book() } as Book;
      console.log(book) //Shows 'object' not 'Book'
      var steps = bitem.steps.map(sitem => <Step>{ ...sitem, ...new Step() } as Step;);]
      book.steps = steps;
      return book;
 }

 console.log(typeof list[0]); //Expect 'Book' but get 'object'

我很好奇为什么强制转换类型会Book产生一个object？有没有简单的方法来完成这个，还是我需要使用构造函数来完成这种映射？

标签： javascripttypescript

解决方案

这段代码怎么样，您可以通过constructor以下技术将对象传递给并创建相同的实例

 class Book implements IBook {
   id: number;
   name: string;
   authorName: string;
   steps : Step[] ;
   constructor(params: IBook) {
     Object.assign(this, params);
   }
 }

 class Step implements IStep {
    id: number;
    name: string;
    status: string = "unknown";
    processing: boolean = false;
    constructor(params: IStep) {
      Object.assign(this, params);
    }
 }


var list : Book[] = data.map((bitem:any)=> {
      var book = new Book(bitem);
      console.log(book) //Shows 'object' not 'Book'
      var steps = bitem.steps.map(sitem => (new Step(sitem)));
      book.steps = steps;
      retrun book;
 });

工作样本在这里

推荐阅读