type computed.set

Author: LucasLefevre

src/runtime/reactivity/computations.ts

@@ -1,13 +1,13 @@
 import { batched } from "../utils";
 
-export interface ReactiveValue<T> {
-  (): T;
+export interface ReactiveValue<TRead, TWrite=TRead> {
+  (): TRead;
   /**
    * Update the value of the reactive with a new value. If the new value is different
    * from the previous values, all computations that depends on this reactive will
    * be invalidated, and effects will rerun.
    */
-  set(nextValue: any): void;
+  set(nextValue: TWrite): void;
 }
 
 export enum ComputationState {

src/runtime/reactivity/computed.ts

@@ -7,11 +7,11 @@ import {
   createComputation,
 } from "./computations";
 
-interface ComputedOptions {
-  set?(value: any): void;
+interface ComputedOptions<TWrite> {
+  set?(value: TWrite): void;
 }
 
-export function computed<T>(getter: () => T, options: ComputedOptions = {}): ReactiveValue<T> {
+export function computed<TRead, TWrite=TRead>(getter: () => TRead, options: ComputedOptions<TWrite> = {}): ReactiveValue<TRead, TWrite> {
   const computation = createComputation({
     compute: () => {
       onWriteAtom(computation);

tests/reactivity/computed.test.ts

@@ -386,4 +386,26 @@ describe("writable computed", () => {
 
     cleanupEffect();
   });
+
+  test("compute can read and write different types", () => {
+    const value = signal(4);
+    const binary = computed(() => value().toString(2), {
+      set: (nextValue: string | number) => {
+        if(typeof nextValue === "number") {
+          value.set(nextValue)
+        } else {
+          value.set(parseInt(nextValue, 2))
+        }
+      }
+    })
+    expect(binary()).toBe("100")
+
+    // can set a string
+    binary.set("110")
+    expect(value()).toBe(6)
+
+    // can also set a number
+    binary.set(7)
+    expect(value()).toBe(7)
+  })
 });