CODEWITHSUNDEEP
cyclejsmostjs
tgk
tgk

Reputation: 4096

Typescript typings in Cyclejs for Mostjs stream interoperability?

I have a small component I'd like to provide property typings for similar to this example

I'm using cyclejs with the mostjs stream library.

This works: 

import { Sources } from '@cycle/run';
import { setup } from '@cycle/most-run';
import { div, input, span, makeDOMDriver, MainDOMSource } from '@cycle/dom';
import { of, Stream, startWith } from 'most'; 

function Checkbox(sources: Sources) {
  const click$ = sources.DOM.select('.checkbox').events('click');
  const toggleCheck$ = click$
    .filter(ev => ev.target instanceof HTMLInputElement)
    .map(ev => ev.target.checked)

  const toggled$ = startWith(false, toggleCheck$)

  const vdom$ = toggled$.map(toggled => 
    div('.checkbox', [
        input('.checkbox', {attrs: {type: 'checkbox', checked: toggled}}), 
        'Label Here'
      ])
    );

  return {
    DOM: vdom$
  }
}

const {sources, sinks, run} = setup(Checkbox, { DOM: makeDOMDriver('#mount')});
const dispose = run();

type Sources is just: 

export declare type Sources = {
    [name: string]: any;
}

and I'd like to create explicit typings for CheckboxSources:

import { DOMSource } from '@cycle/dom';

export type CheckboxSources = {
  DOM: DOMSource,
  props$: Stream<CheckboxProps>  
}

But DOMSource uses Stream from xstream --- do I need to convert between the two stream libraries? I thought most-run would abstract that conversion away?

I can get around using type any for the DOM, but would prefer explicit typings.

Upvotes: 2

Views: 152

Answers (1)

Andr&#233; Staltz
Andr&#233; Staltz

Reputation: 13994

For most.js with Cycle DOM, you need to grab the typings separately:

import {DOMSource} from '@cycle/dom/most-typings.d.ts'

We tried to support typings for all stream libraries with zero configuration, but while TypeScript can't support generic-of-generics (e.g. S<T> where S would be a stream type either from xstream or most, and T could be e.g. a string), this feature seems unfortunately not possible.

Upvotes: 4

Related Questions