computed
Overload 1
Creates a computed signal that derives its value from other signals. Computed signals automatically update when their dependencies change and use lazy evaluation for optimal performance.
function computed<Value, Diff = unknown>(
name: string,
compute: (
previousValue: typeof UNINITIALIZED | Value,
lastComputedEpoch: number,
) => Value | WithDiff<Value, Diff>,
options?: ComputedOptions<Value, Diff>,
): Computed<Value, Diff>;Example
const name = atom("name", "John");
const greeting = computed("greeting", () => `Hello ${name.get()}!`);
console.log(greeting.get()); // 'Hello John!'computed may also be used as a decorator for creating computed getter methods.
class Counter {
max = 100;
count = atom("count", 0);
@computed getRemaining() {
return this.max - this.count.get();
}
}You may optionally pass in a ComputedOptions when used as a decorator:
class Counter {
max = 100;
count = atom("count", 0);
@computed({ isEqual: (a, b) => a === b })
getRemaining() {
return this.max - this.count.get();
}
}Parameters
| Name | Description |
|---|---|
| The name of the signal for debugging purposes |
| The function that computes the value of the signal. Receives the previous value and last computed epoch |
| Optional configuration for the computed signal |
Returns
Computed<Value, Diff>;A new computed signal
Overload 2
TC39 decorator for creating computed methods in classes.
function computed<This extends object, Value>(
compute: () => Value,
context: ClassMethodDecoratorContext<This, () => Value>,
): () => Value;Example
class MyClass {
value = atom("value", 10);
@computed
doubled() {
return this.value.get() * 2;
}
}Parameters
| Name | Description |
|---|---|
| The method to be decorated |
| The decorator context provided by TypeScript |
Returns
() => Value;The decorated method
Overload 3
Legacy TypeScript decorator for creating computed methods in classes.
function computed(
target: any,
key: string,
descriptor: PropertyDescriptor,
): PropertyDescriptor;Example
class MyClass {
value = atom("value", 10);
@computed
doubled() {
return this.value.get() * 2;
}
}Parameters
| Name | Description |
|---|---|
| The class prototype |
| The property key |
| The property descriptor |
Returns
PropertyDescriptor;The modified property descriptor
Overload 4
Decorator factory for creating computed methods with options.
function computed<Value, Diff = unknown>(
options?: ComputedOptions<Value, Diff>,
): ((
target: any,
key: string,
descriptor: PropertyDescriptor,
) => PropertyDescriptor) &
(<This>(
compute: () => Value,
context: ClassMethodDecoratorContext<This, () => Value>,
) => () => Value);Example
class MyClass {
items = atom("items", [1, 2, 3]);
@computed({ historyLength: 10 })
sum() {
return this.items.get().reduce((a, b) => a + b, 0);
}
}Parameters
| Name | Description |
|---|---|
| Configuration options for the computed signal |
Returns
((
target: any,
key: string,
descriptor: PropertyDescriptor,
) => PropertyDescriptor) &
(<This>(
compute: () => Value,
context: ClassMethodDecoratorContext<This, () => Value>,
) => () => Value);A decorator function that can be applied to methods