asyncState.ts

import { Component } from 'preact';

type Deferred<T> = {
    [P in keyof T]?: Promise<T[P]>;
};

function isPromise<T>(V: any): V is Promise<T> {
    return 'then' in V;
}

export function asyncState<S>(component: Component<any, S>, state: Deferred<S>) {
    // TODO: add observable support
    Object.keys(state)
        .forEach((key: keyof S) => {
            const value = state[key];
            if (isPromise<any>(value)) {
                value.then(res => component.setState(<any> { [key]: res }))
            } else {
                throw new Error('Unknown type passed to bindState');
            }
        })
}

example.ts

import { asyncState } from './asyncState';

class Posts extends Component<any, any> {
    public componentDidMount() {
        asyncState(this, { posts: fetch('/api/posts').then(res => res.json()) })
    }
  
    // ...
}