designing an effect system in typescript

typescript-effect-system.ts

type Effect<A> = {type: A}

interface IO<A> {}
interface NetworkIO<A> extends IO<A> {}

interface DOMMutation<A> {}
interface DOMAppend<A> extends DOMMutation<A> {}
interface DOMRemove<A> extends DOMMutation<A> {}

function request<A>(url: string): Promise<A> & Effect<NetworkIO<A>> {
  return fetch(url).then(_ => _.json())
}

function render<A extends HTMLElement>(element: A): void & Effect<DOMAppend<A>> {
  document.body.appendChild(element)
}

function remove<A extends HTMLElement>(element: A): void & Effect<DOMRemove<A>> {
  document.body.removeChild(element)
}

This is very cool!