TypeScript 如何讓 Plain Object 轉成 Class 物件

Plain Object , 在Java稱為 POJO（Plain Ordinary Java Object）,
有時候會稱為DTO,指的就是沒有邏輯處理的物件,只有geter 和 seter
,那我們常把此Raw Data 變成有需要邏輯處理的方法的物件,就可以用等下介紹套件來解決

使用情境

export class Test{
    name = 'World';
    
    public sayHello():void{
        console.log('hello '+ this.name);
    }
}

1. 一般我們會將物件序列化為JSON string

const o = new Test();
const jsonS = JSON.stringify(o) 

2. 然後將json string 存起來
3. 然後之後還原回來,作使用

const ino:Test = JSON.parse(jsonS);
ino.sayHello(); // 這時候會報錯 undefined method

4. 結果會發現報錯 undefined method

解決方法

1. npm 安裝 class-transformer npm i class-transformer
2. 修改程式碼為

import { plainToClass } from 'class-transformer';

...

const ino = JSON.parse(jsonS);
const inPo = plainToClass(Test, ino);
inPo.sayHello(); 

這樣就解了

官方連結 : https://github.com/typestack/class-transformer

如果是巢狀結構的物件,要再做以下修改

import { Type } from 'class-transformer';

...

export class Test{
    name = 'World';
    @Type(() => Child)
    firstChild = new Child();
    @Type(() => Child)
    otherChilds = new Array< Child >();
    
    public sayHello():void{
        console.log('hello '+ this.name);
    }
}

export class Child{
    name= 'cc';
    age = 1;
    
    public sayAge():void{
        console.log(this.name+':'+age);
    }
}

要加 annotation @Type 來指定轉換的型別(class)

md code : # TypeScript 如何讓 Plain Object 轉成 Class 物件 Plain Object , 在Java稱為 POJO（Plain Ordinary Java Object）, 有時候會稱為DTO,指的就是沒有邏輯處理的物件,只有geter 和 seter ,那我們常把此Raw Data 變成有需要邏輯處理的方法的物件,就可以用等下介紹套件來解決 ## 使用情境 ```Typescript export class Test{ name = 'World'; public sayHello():void{ console.log('hello '+ this.name); } } ``` 1. 一般我們會將物件序列化為JSON string ```Typescript const o = new Test(); const jsonS = JSON.stringify(o) ``` 2. 然後將json string 存起來 3. 然後之後還原回來,作使用 ```Typescript const ino:Test = JSON.parse(jsonS); ino.sayHello(); // 這時候會報錯 undefined method ``` 4. 結果會發現報錯 undefined method ## 解決方法 1. npm 安裝 class-transformer ``` npm i class-transformer ``` 2. 修改程式碼為 ```Typescript import { plainToClass } from 'class-transformer'; ... const ino = JSON.parse(jsonS); const inPo = plainToClass(Test, ino); inPo.sayHello(); ``` 這樣就解了 >> 官方連結 : https://github.com/typestack/class-transformer ## 如果是巢狀結構的物件,要再做以下修改 ```Typescript import { Type } from 'class-transformer'; ... export class Test{ name = 'World'; @Type(() => Child) firstChild = new Child(); @Type(() => Child) otherChilds = new Array< Child >(); public sayHello():void{ console.log('hello '+ this.name); } } export class Child{ name= 'cc'; age = 1; public sayAge():void{ console.log(this.name+':'+age); } } ``` 要加 annotation @Type 來指定轉換的型別(class)