如何将 Typescript 类对象转换为 Immutable.js 映射

Question

我正在尝试将 immutable.js 引入 Angular2 项目，但在使用带有 immutable.js 的 typescript 类时遇到问题。

我正在尝试使用 Immutable.fromJS 函数将来自类的可变对象深度转换为不可变对象。不幸的是，虽然 fromJS 在 json 对象上工作得很好，但如果给定了来自某个类的对象，它什么也不做（或者在尝试调用 .toJS() 到生成的对象时抛出）。

class Person {
  public firstName: string;
}

let p = new Person();
p.firstName = 'Mike';
console.log(p);

let immutablePersonFail = Immutable.fromJS(p);
console.log(Immutable.Map.isMap(immutablePersonFail)); // returns false

let immutablePersonSuccess = Immutable.fromJS({firstName: 'Nick'});
console.log(Immutable.Map.isMap(immutablePersonSuccess)); // returns true

这里是 jsbin 演示问题： https://jsbin.com/yefeha/edit?js,console

Answer 1

试试这个：

let immutablePersonFail = Immutable.fromJS(Object.assign({}, p));
console.log(Immutable.Map.isMap(immutablePersonFail));

我在评论中引用了the other thread 中的更多信息。

---

编辑

这是一种选择：

class Base {
    toObject(): any {
        return Object.assign({}, this);
    }
}

class Job extends Base {
    public jobTitle: string;
}

class Person extends Base {
    public firstName: string;
    public jobs: Job[];

    toObject(): any {
        let obj = super.toObject();

        obj.jobs = obj.jobs.map(job => job.toObject());

        return obj;
    }
}

另一种选择是区分数据和功能：

interface JobData {
    title: string;
}

class Job {
    private data: JobData;

    getTitle(): string {
        return this.data.title;
    }

    getData(): JobData {
        return Immutable.fromJS(this.data);
    }
}

interface PersonData {
    firstName: string;
    lastName: string;
    jobs: JobData[];
}

class Person {
    private data: PersonData;
    public jobs: Job[];

    getData(): JobData {
        return Immutable.fromJS(this.data);
    }
}

至于复杂性，我不能说，这取决于你的业务逻辑是什么，以及你如何实现它。

Answer 2

正如您所注意到的，将类转换为不可变对象需要将类更改为不同的形式——常规 js 对象。对我来说，最好的解决方案是一开始就不要使用课程。使用常规对象然后使用与这些对象配合良好的模式会不会那么痛苦。

interface Person {
    firstName: string;
    phoneNumbers: string[];
}

const p: Person = { firstName: "Mike", phoneNumbers: [] };   
const immutablePersonFail = Immutable.fromJS(p);
console.log(Immutable.Map.isMap(immutablePersonFail)); // true

如果您最初使用类来帮助初始化对象，那么您可以使用函数或工厂类方法来帮助创建常规 js 对象：

function createPerson(firstName: string) {
    const person: Person = {
        firstName: firstName,
        phoneNumbers: []
    };
    return Immutable.fromJS(person);
}

如果您最初使用类从数据中获取信息，那么您可以为此使用单独的类：

class PersonHandler {
    constructor(private person: Person) { // or typed as whatever fromJS returns
    }

    getFirstPhoneNumber() {
        return this.person.phoneNumbers[0];
    }
}

Answer 3

我遇到了类似的问题，并通过从 typescript 类创建不可变结构来解决这个问题，该结构还将这些类的子/属性转换为不可变对象。

例如：

class Car {
  make: string;
  model: string;
  wheels: Wheel[]; // Is a collection of wheel objects (new Wheel() ..)

  toImmutable() {
   return Immutable.fromJS({
     ...omit(this, 'wheels'), // Lodash omit function, pick all other attributes except the wheels
     wheels: this.wheels.map((w: Wheel) => w.toImmutable())
   });
  }
 }

class Wheel {
  size: number;
  bolts: number;

  toImmutable() {
    return Immutable.fromJS(Object.assign({}, this));
  }
}

// Later, something like:

const car = new Car();
car.addWheel(new Wheel());
car.addWheel(new Wheel());

// Convert to immutable object
const immutableCar = car.toImmutable();

immutableCar 现在生成一个不可变地图，该地图也有轮子作为不可变地图。