hyperapp v2 の TypeScript 用型定義を書いた

とりあえず Pull Request などを投げるのが面倒なのでここで公開します。

出来上がった hyperapp 型定義ファイル

/// <reference lib="es2015,dom" />

export as namespace hyperapp;

export interface VNode<A> {
  name: string;
  props: A;
  children: [VNode | string];
  node: HTMLElement;
  type: number;
  key: any;
}

export function View<S>(props: S): VNode;

export type Event<V> = (event: HTMLElement) => V | V;

export function Dispatch<S, P>(
  fn: (state: S, payload: P) => P,
  payload: P
): void;

export type Effect<S, P> = [Dispatch<S, P>, P];

export function Action<S, V, P>(state: S, value: Event<V>): [S, Effect<S, P>];
export function Action<S, P>(state: S): [S, Effect<S, P>];
export function Action<S, V>(state: S, value: Event<V>): S;
export function Action<S>(state: S): S;

export type Subscription<S, P> = Effect<S, P>;
export function Subscriptions<S, P>(state: S): [Subscription<S, P>];

export type Attr<V> = Event<V> | V;

export interface Attrs<V> {
  [key: string]: Attr<V>;
}

export function app<S, P>(props: {
  init: S;
  view: View<S>;
  subscriptions?: Subscriptions<S, P>;
  node: HTMLElement;
}): void;

export function h<A>(
  name: string,
  attrs: Attrs<A>,
  children?: [VNode | string] | VNode | string
): VNode;

それでこれ何？

JavaScript での vdom な tiny framework に

と言うのが存在するのですが、 今回作った TypeScript の型定義ファイルはこの hyperapp を TypeScript で扱い易くするためのファイルです。

自由に使って良いの？

基本的にこの WebSite でのサンプルコードは MIT-licensed で公開しているので、 上記コードも MIT-licensed な扱いでよろしくお願いします。

あと今回 TypeScript の型定義ファイルは、 TypeScript の公式サイトと hyperapp の公式サイト + ソースコードとにらめっこして書き上げましたが、 TypeScript で型定義ファイルを書くのは私に取って初めての行為であり、 もしかすると型の定義情報が間違っている可能性もありますので、 間違いなどがありましたらその辺りは適宜修正して使ってください。

以上

ちなみにこの定義ファイルは最近 WebApp を開発する過程で作ったモノなんですが、 とりあえず今のところ不具合らしい不具合に私は遭遇していません。

とは言え今作ってる WebApp は開発の初期段階で hyperapp を使い込む辺りまでは到達していないので、 もしかするとどこかで不具合が出る型定義になっているかもしれないです。

また私は TypeScript を JavaScript へコンパイルするのに、

を Webpack と組み合わせて使っているため、 それ以外の TypeScript Compiler で動作するかどうかについてはまったく検証も何もしていないです。はい。

とは言いつつも hyperapp を TypeScript で取り扱う場合には上記型定義ファイルをベースに手を加えれば良さそうな気がするので、 よかったら使ってみてください。

と言うことでこちらからは以上です。はい。