【问题标题】:typescript, How do I pass an object to a constructor of class for instantiation打字稿,如何将对象传递给类的构造函数以进行实例化
【发布时间】:2017-08-04 10:00:17
【问题描述】:

我有一个从后端 api 获取的数组对象数据。喜欢:

[
 {name: 'react', age: 4},
 {name: 'angular', age: 4},
 ...
 {name: 'rxjs', age: 2}
]

我确定一个class 和一个interface,像这样:

interface IBook {
  name: string;
  age: number;
}

class Book{
  book: IBook;

  constructor(book: IBook) {
    this.book = book;
  }

  //I can definite some method here: 

  getFullName() {
    return this.book.firstName + ' ' + this.book.lastName;
  }

  isValid() {
    return book.name.length > 0;
  }

}

//when get the data
const dataModels = datas.map(data => {
  return new Book(data);
});

所以我可以封装一些数据模型方法,比如book.getFullName()

我可以这样使用它:

const fullname = book.getFullName()

而不是这样:

const fullname = book.firstName + ' ' + book.lastName;

有没有更好的方法来做到这一点? 我不确定我的想法是否正确。

问题是如何按照正确的方式将js对象转换为ts类模型。

或者,只是确定数据interface。是否需要将javascriptjson数据转换为typescriptclass模型?

--更新--

尤其是嵌套数据。像这样:

const datas = [
 {name: 'react', age: 2, tag: [{id: 1}, {id: 2}]}
]

【问题讨论】:

  • Typescript 在运行到浏览器之前被转换为 javascript。它可以处理 javascript 语法,因为最终 javascript 将要运行。您的对象应该只按名称具有正确的属性,并且它应该可用于 typescript 对象
  • @Amit 感谢您的回答,我更新了我的问题
  • stackoverflow.com/questions/45448199/… 给你更多的灵活性怎么样
  • @Kuncevic Object.assign()spread operator 可以做到这一点。但它不适合嵌套数据。

标签: typescript


【解决方案1】:

如果不需要任何方法,只需转换您的数据。否则,您可以将数据复制到您的班级。

let datas = [
 {name: 'react', age: 4, extra: { value: 1 }},
 {name: 'angular', age: 4, extra: { value: 2 }},
 {name: 'rxjs', age: 2, extra: { value: 3 }}
]

interface IBook {
  name: string;
  age: number;
}

interface Extra {
    value: number;
}

let books: IBook[] = datas;
console.log(books[0].name); // react

class Book {
    name: string;
    age: number;
    extra: Extra;

    constructor(data: any) {
        for (let key in data) {
            this[key] = data[key];
        }
    }

    getFullName() {
        return this.name;
    }

    isValid() {
        return this.name.length > 0;
    }
}

let books2 = datas.map(book => new Book(book));
console.log(books2[1].getFullName()); // angular
console.dir(books2[0].extra.value); // 1

【讨论】:

  • 你的意思是不需要把json数据转成强类型语言java这样的数据模型类?我的想法是我可以向数据模型类添加一些方法。例如:book.isValid()book.getFullName()。将方法放到模型类中,而不是像这样使用:const fullname = book.firstname + ' ' + book.lastname.
  • 你是对的。如果您需要为数据添加行为,请创建一个类。
  • 嵌套数据呢? for..inobject.assignspread operator,都只适合简单的数据。
  • 以同样的方式使用嵌套数据。不同之处在于您必须定义嵌套接口。
  • 谢谢。我知道。但我认为存在性能问题。因为如果我将json数组数据转换为模型类,就必须使用for-loop来遍历数组。你怎么看?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-01-18
  • 1970-01-01
  • 1970-01-01
  • 2014-06-04
  • 1970-01-01
  • 1970-01-01
  • 2014-04-15
相关资源
最近更新 更多