Javascript doesn't really have an immutable object but with typescript I can
prevent compilation if there's a rogue function that will try to mutate an object.
Let's say I have this object, and let's assume the values are always there
because if I start talking about the possibility of null then I have to talk
about prisms. So let's take it easy and stick with lenses for now.
const bankIdentity: BankIdentity = {
account: {
owner: {
address: {
data: {
city: "Malakoff",
region: "NY",
street: "2992 Cameron Road",
postal_code: "14236",
country: "US"
},
primary: true
}
}
}
};
It has this type.
interface Address {
readonly city: string;
readonly region: string;
readonly street: string;
readonly postal_code: string;
readonly country: string;
}
interface AddressData {
readonly data: Address;
readonly primary: boolean;
}
interface Owner {
readonly address: AddressData;
}
interface Account {
readonly owner: Owner;
}
interface BankIdentity {
readonly account: Account;
}
Accessing a value
Without using any library I can manipulate this object no problem.
When I want to access a field, I just do the dot syntax and it gives me the
value of that field.
const cityRes = bankIdentity.account.owner.address.data.city;
// "Malakoff"
Setting a new value and returning the whole object
It becomes a hassle when I have to set a new value.
const cityRes = Object.assign({}, bankIdentity, {
account: {
owner: {
address: {
data: Object.assign({}, bankIdentity.account.owner.address.data, {
city: "Another City"
})
}
}
}
});
// { account:
// { owner:
// { address:
// { data:
// { city: 'Another City',
// region: 'NY',
// street: '2992 Cameron Road',
// postal_code: '14236',
// country: 'US'
// }
// }
// }
// }
//}
Applying a function and returning the whole object
Same ugliness can be seen when applying a function to the field.
const capitalize = (s: string): string => s.toUpperCase();
const cityRes = Object.assign({}, bankIdentity, {
account: {
owner: {
address: {
data: Object.assign({}, bankIdentity.account.owner.address.data, {
city: capitalize(bankIdentity.account.owner.address.data.city)
})
}
}
}
});
// { account:
// { owner:
// { address:
// { data:
// { city: 'MALAKOFF',
// region: 'NY',
// street: '2992 Cameron Road',
// postal_code: '14236',
// country: 'US'
// }
// }
// }
// }
//}
monocle-ts
Lenses to the rescue! Unfortunately I don't think it's possible or at least easy
to generate lenses based on the objects like what makeLenses does,
so I have to hand code all of them.
import { Lens } from "monocle-ts";
const account = Lens.fromProp<Bankdentity>()("account");
const owner = Lens.fromProp<Account>()("owner");
const address = Lens.fromProp<Owner>()("address");
const data = Lens.fromProp<AddressData>()("data");
const city = Lens.fromProp<Address>()("city");
const region = Lens.fromProp<Address>()("region");
const street = Lens.fromProp<Address>()("street");
const postalCode = Lens.fromProp<Address>()("postal_code");
const country = Lens.fromProp<Address>()("country");
Well... accessing a value with monocle-ts looks pretty verbose.
const cityRes = account
.compose(owner)
.compose(address)
.compose(data)
.compose(city)
.get(bankIdentity);
// "Malakoff"
I guess I can do it like this
const cityRes = Lens.fromPath<BankIdentity>()(["account", "owner", "address", "data", "city"]).get(bankIdentity);
// "Malakoff"
but I think it's better to just use the dot syntax, at least in my opinion.
Lenses shine when it comes to updating and applying a function to a deeply
nested value.
Setting a value and returning the whole object
const cityRes = account
.compose(owner)
.compose(address)
.compose(data)
.compose(city)
.set("Another City")(bankIdentity);
// { account:
// { owner:
// { address:
// { data:
// { city: 'Another City',
// region: 'NY',
// street: '2992 Cameron Road',
// postal_code: '14236',
// country: 'US'
// }
// }
// }
// }
//}
I think that looks a lot cleaner than using Object.assign.
Applying a function and returning the whole object
Yep. That definitely looks a lot cleaner.
const capitalize = (s: string): string => s.toUpperCase();
const cityRes = account
.compose(owner)
.compose(address)
.compose(data)
.compose(city).modify(capitalize)(bankIdentity);
// { account:
// { owner:
// { address:
// { data:
// { city: 'MALAKOFF',
// region: 'NY',
// street: '2992 Cameron Road',
// postal_code: '14236',
// country: 'US'
// }
// }
// }
// }
//}
Top comments (2)
I always liked the idea of immutability and lenses, but disliked the indirectness of the resulting code. The
@rimbu/deeplibrary, part of the Rimbu immutable collections library, offers a function calledpatchand an object calledPaththat can perform lens-like operations on plain objects.See:
[Disclaimer] I am the author of Rimbu
Nice! I'm glad a lot more people are exploring this space in typescript. I use optics coz it's what i'm used to but I gotta admit, the ergonomics isn't that good in typescript.