Resource wrappers in Kotlin and Typescript

Resource.kt

sealed class Resource<T> {
  object Loading: Resource<Nothing>()
  data class Success<T>(val data: T): Resource<T>()
  data class Error(val error: AppError): Resource<Nothing>()
}

Resource.ts

export type Resource<T> = ResourceLoading | ResourceSuccess<T> | ResourceError

export class ResourceLoading { }

export class ResourceSuccess<T> {
    constructor(readonly data: T) { }
}

export class ResourceError {
    constructor(readonly error: AppError) { }
}

/**
 * When using the state patter `type State = Readonly<typeof initialState>` with React, a resource should be
 * of type `Resource`, not the initial state given. Use this to instantiate the `initialState`.
 * 
 * @param initial Optional state to begin with, if none is provided this defaults to loading
 */
export function initialResource<T>(initial?: Resource<T>): Resource<T> {
    return initial || new ResourceLoading()
}

TypescriptExample.tsx

type TParams = {
    gistId: string
}

type Props = RouteComponentProps<TParams>

const initialState = {
    gist: initialResource<Gist>()
}

type State = Readonly<typeof initialState>
 
class GistDetail extends React.Component<Props, State> {
    readonly state: State = initialState

    componentDidUpdate(prevProps: Props, prevState: State) {
        const currentId = prevProps.match.params.gistId
        const nextId = this.props.match.params.gistId
        if (nextId !== currentId) {
            this.setState({
                gist: new ResourceLoading()
            })
            this.fetchGist(nextId)
        }
    }

    render() {
        const { gist } = this.state
        
        if (gist instanceof ResourceLoading) {
            return (
                <Segment>
                    <Loader active inline='centered' />
                </Segment>
            )
        } else if (gist instanceof ResourceSuccess) {
            return (
                <Container>
                    <code>
                        {gist.data.url}
                    </code>
                </Container>
            )
        } else {
            return (
                <Container>
                    <h1>{gist.error.message}</h1>
                </Container>
            )
        }
    }

    private fetchGist(gistId: string) {
        console.log(`fetching ${gistId}`)
        fetch(`https://api.github.com/gists/${gistId}`)
            .then(res => res.json())
            .then(gist => { this.setState({ gist: new ResourceSuccess(gist) }) })
    }
}
 
export default GistDetail;

I would probably make the following changes:

export type Resource<T> = ResourceLoading | ResourceSuccess<T> | ResourceError

export class ResourceLoading { }

export class ResourceSuccess<T> {
    constructor(readonly data: T) { }
}

export class ResourceError {
    constructor(readonly error: AppError) { }
}

/**
 * When using the state patter `type State = Readonly<typeof initialState>` with React, a resource should be
 * of type `Resource`, not the initial state given. Use this to instantiate the `initialState`.
 * 
 * @param initial Optional state to begin with, if none is provided this defaults to loading
 */
export function initialResource<T>(initial?: Resource<T>): Resource<T> {
    return initial || new ResourceLoading()
}

That's much cleaner 👍 !