Skip to main content

TypeScript

❗️info

WIP documentation!

States are type inferred​

const NUMBER = createState(0); // 'number' State
const STRING = createState('jeff'); // 'string' State

States can be explicitly typed​

const NUMBER = createState<number>(0); // 'number' State
const PERSON = createState<{id: number, name: 'jeff'} | null>(null); // '{id: number, name: 'jeff'} | null' State

[React] useAgile is typed based on State types​

// single State
const num = useAgile(NUMBER);
console.log(typeof num); // Returns 'number'

// or multiple State
const [str, person] = useAgile([STRING, PERSON]);
console.log(typeof str); // Returns 'string'
// person is of the type '{id: number, name: 'jeff'} | null'

Computed States are type inferred​

const MY_INTRODUCTION = createComputed(() => {
  return `My name is '${MY_NAME.value}' and I am ${MY_AGE.value} yeas old.`;
}); // 'string' Computed State

Computed States can be explicitly typed​

const IS_JEFF = createComputed<boolean>(() => {
    return MY_NAME.is("jeff");
}); // 'boolean' Computed State

Problem with async Computed States​

Since the Computed value is cached, an async Computed State isn't of the type Promise. Instead, it is null as long as the value hasn't been cached.

const ASYNC = createComputed(async () => {
    // sleep x seconds
    return 'async Computed';
}); // 'string' Computed State [However it is null as long as no value is cached]

// solution
const ASYNC = createComputed<strinng | null>(async () => {
    // sleep x seconds
    return 'async Computed';
}); // 'string | null' Computed State