WORK-IN-PROGRESS Preliminary TypeScript documentation for Hyperapp

typescript.md

TypeScript Support

Hyperapp comes with TypeScript support out-of-the-box. For those unaware, TypeScript is essentially JavaScript with the added precision of static typing, amongst other things. For the remainder of this document we'll assume you have some familiarity setting up and working with TypeScript so we can focus on Hyperapp-specific info.

---

Preparation

Hyperapp's type definitions take advantage of certain others that come bundled with TypeScript. So, in your project's tsconfig.json be sure to have at a bare minimum:

{
  "compilerOptions": {
    "lib": ["DOM"]
  }
}

---

General Usage

The types definition file itself is fully annotated and was written to be a readable reference guide for each and every Hyperapp-specific type. That said, we'll cover some of them here to get a better idea of how they work.

TODO:

Here is the complete list of the publicly available types:

• Action: Lets you work with actions outside of event handling.
• App: Helps you setup app props to be used with embedded Hyperapp instances.
• ClassProp: Helps you integrate CSS into your components.
• CustomPayloads: Lets you use actions with custom payloads in components that use their own set of props.
• Dispatch: Lets you work with dispatching in your effects and subscriptions.
• Dispatchable: Helps you define actions.
• Effect: Helps you define effects.
• ElementVNode: Helps you define views.
• EventActions: Helps you use event handlers in your components.
• MaybeVNode: Helps you define conditional views.
• Props: Validates HTML-related attributes you want to use.
• StyleProp: Helps you integrate CSS into your components.
• Subscription: Helps you define subscriptions.
• TextVNode: Helps you define views.
• TypedH: Lets you use h() (and even text() and memo()) without worrying about how type inference works.
• Unsubscribe: Helps you define subscriptions.
• VNode: Helps you define views.

Defining State

Hyperapp is unable to know ahead of time what the type of your application state is, so you should set that up first.

import { State, app } from "hyperapp"

type ShoppingCart = { gotMilk: boolean }

const freshCart: ShoppingCart = ({ gotMilk: false })

app({
  init: freshCart,
  // ...
})

Declaring Views

View<S>

All views can be given a state and must return a VDOM element.

const dashboard: View<ShoppingCart> =
  (state) => h("div", { class: "cart" }, viewItems(state.items))

Changing State

Action<S>

This type handles all action

You'll usually want to just

Action<S, P = any>

type Action<S, P = any> = ActionTransform<S, P> | ActionWithPayload<S, P>

Types Testing

If you're interested in the test suite for these type definitions you can find it at: https://github.com/icylace/hyperapp-types-tests