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现在产生一个不可变的映射，它也有轮子作为不可变映射。

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

3 个答案:

修改