Matt LewandowskiJavaScript's Proxy object is a useful tool that opens up a world of possibilities, allowing you to create some really useful behaviors in your applications. When combined with TypeScript, Proxy enhances your ability to manage and manipulate objects and functions in ways you might not have thought possible. In this article, we'll explore the incredible utility of Proxies through practical examples.
What is a Proxy?
A Proxy in Javascript is a wrapper around another object (target), which lets you intercept and redefine fundamental operations for that object, such as property lookup, assignment, enumeration, and function invocation. This means you can add custom logic when getting or setting properties. This is great for handling validations, notifications, or even automatic data binding.
Creating a Simple Proxy
Let's jump in and see how to create a Proxy. We'll start with a really basic example, in case you haven't seen Proxies before.
type MessageObject = {
message: string;
};
let target: MessageObject = {
message: "Hello, world!"
};
let handler: ProxyHandler<MessageObject> = {
get: (obj, prop) => {
return `Property ${String(prop)} is: ${obj[prop]}`;
}
};
let proxy: MessageObject = new Proxy(target, handler);
console.log(proxy.message); // Output: Property message is: Hello, world!
In this example, whenever a property on the proxy is accessed, the handler's get method is called, allowing us to modify the behavior of simply accessing a property. I'm sure you can imagine all the different possibilities this opens up.
Now let's get into 7 more useful examples!
1. Auto-populating Properties
Proxies can dynamically populate object properties when accessed, which is useful for on-demand processing or initialization of complex objects.
type LazyProfile = {
firstName: string;
lastName: string;
fullName?: string;
};
let lazyProfileHandler = {
get: (target: LazyProfile, property: keyof LazyProfile) => {
if (property === "fullName" && !target[property]) {
target[property] = `${target.firstName} ${target.lastName}`;
}
return target[property];
}
};
let profile: LazyProfile = new Proxy({ firstName: "John", lastName: "Doe" }, lazyProfileHandler);
console.log(profile.fullName); // Output: John Doe
2. Operation Counting
Use a Proxy to count how many times certain operations are performed on an object. This is particularly useful for debugging, monitoring, or profiling application performance.
type Counter = {
[key: string]: any;
_getCount: number;
};
let countHandler = {
get: (target: Counter, property: keyof Counter) => {
if (property === "_getCount") {
return target[property];
}
target._getCount++;
return target[property];
}
};
let counter: Counter = new Proxy({ a: 1, b: 2, _getCount: 0 }, countHandler);
counter.a;
counter.b;
console.log(counter._getCount); // Output: 2
3. Immutable Objects
Create truly immutable objects using Proxies by intercepting and preventing any changes to the object after its creation.
function createImmutable<T extends object>(obj: T): T {
return new Proxy(obj, {
set: () => {
throw new Error("This object is immutable");
}
});
}
const immutableObject = createImmutable({ name: "Jane", age: 25 });
// immutableObject.age = 26; // Throws error
4. Method Chaining and Fluent Interfaces
Enhance method chaining by using Proxies to build fluent interfaces, where each method call returns a Proxy to enable further calls.
type FluentPerson = {
setName(name: string): FluentPerson;
setAge(age: number): FluentPerson;
save(): void;
};
function FluentPerson(): FluentPerson {
let person: any = {};
return new Proxy({}, {
get: (target, property) => {
if (property === "save") {
return () => { console.log(person); };
}
return (value: any) => {
person[property] = value;
return target;
};
}
}) as FluentPerson;
}
const person = FluentPerson();
person.setName("Alice").setAge(30).save(); // Output: { setName: 'Alice', setAge: 30 }
5. Smart Caching
This is one of my favorite use cases. Implement smart caching mechanisms where data is fetched or calculated on-demand and then stored for quick subsequent accesses.
function smartCache<T extends object>(obj: T, fetcher: (key: keyof T) => any): T {
const cache: Partial<T> = {};
return new Proxy(obj, {
get: (target, property: keyof T) => {
if (!cache[property]) {
cache[property] = fetcher(property);
}
return cache[property];
}
});
}
const userData = smartCache({ userId: 1 }, (prop) => {
console.log(`Fetching data for ${String(prop)}`);
return { name: "Bob" }; // Simulated fetch
});
console.log(userData.userId); // Output: Fetching data for userId, then returns { name: "Bob" }
6. Dynamic Property Validation
Proxies can dynamically enforce rules for property assignments. Here's how you can ensure that certain conditions are met before properties are changed:
let user = {
age: 25
};
let validator = {
set: (obj, prop, value) => {
if (prop === 'age' && (typeof value !== 'number' || value < 18)) {
throw new Error("User must be at least 18 years old.");
}
obj[prop] = value;
return true; // Indicate success
}
};
let userProxy = new Proxy(user, validator);
userProxy.age = 30; // Works fine
console.log(userProxy.age); // Output: 30
// userProxy.age = 'thirty'; // Throws error
// userProxy.age = 17; // Throws error
7. Watching for Changes
A common use case for Proxies is creating watchable objects that notify you when changes occur.
function onChange(obj, onChange) {
const handler = {
set: (target, property, value, receiver) => {
onChange(`Property ${String(property)} changed to ${value}`);
return Reflect.set(target, property, value, receiver);
}
};
return new Proxy(obj, handler);
}
const person = { name: "John", age: 30 };
const watchedPerson = onChange(person, console.log);
watchedPerson.age = 31; // Console: Property age changed to 31
Downsides of Using Proxies
While Proxies are super useful, they come with a few caveats:
- Performance: Proxies can introduce a performance overhead, especially in high-frequency operations, because every operation on the proxy has to go through the handler.
- Complexity: With great power comes greater complexity. Incorrect use of Proxies can lead to hard-to-debug problems and maintainability issues.
- Compatibility: Proxies cannot be polyfilled for older browsers that do not support ES6 features, limiting their use in environments that require broad compatibility.
The End
Proxies in JavaScript, especially when used with TypeScript, offer a flexible way to interact with objects. They enable things like validation, observation, and bindings. Whether you're building complex user interfaces, developing games, or working on server-side logic, understanding and utilizing Proxies can provide you with a deeper level of control and sophistication in your code. Thanks for reading and I hope you learned something new! 🎓
Also, shameless plug 🔌. If you work in an agile dev team and use tools for your online meetings like planning poker or retrospectives, check out my free tool called Kollabe!
