我有一个从后端API获取的数组对象数据。喜欢:
[
{name: 'react', age: 4},
{name: 'angular', age: 4},
...
{name: 'rxjs', age: 2}
]
Run Code Online (Sandbox Code Playgroud)
我确定a class和an 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);
});
Run Code Online (Sandbox Code Playgroud)
所以我可以封装一些数据模型方法,例如 book.getFullName()
我可以这样使用它:
const fullname = book.getFullName()
而不是这样:
const fullname = book.firstName + ' ' + book.lastName;
有一个更好的方法吗?我不确定我的想法是否正确。
问题是如何根据正确的方法将js对象转换为ts类模型。
或者,仅确定数据interface。是否需要将javascriptjson数据转换为typescript class模型?
-更新-
特别是嵌套数据。像这样:
const datas = [
{name: 'react', age: 2, tag: [{id: 1}, {id: 2}]}
]
Run Code Online (Sandbox Code Playgroud)
如果不需要任何方法,只需投射数据即可。否则,您可以将数据复制到您的班级。
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
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3388 次 |
| 最近记录: |