typescript - cyclejs在地图操作期间从输入文本中提取目标

Question

 Main.ts

    const clickMessages$ = sources.DOM
            .select('.add')
            .events('click');

        const latitudeMinimum$ = sources.DOM
            .select('.latitudeMinimum')
            .events('input');

        const latitudeMaximum$ = sources.DOM
            .select('.latitudeMaximum')
            .events('input');


        const latituteRange$ = xs.combine(latitudeMinimum$, latitudeMaximum$); 

        const newStream$ = xs.combine(clickMessages$, latituteRange$);
        const filter$ = newStream$.filter(c => { return true });
        const map$ = filter$.map(([a, [b, c]]) => { return [b.target.value, c.target.value] } 
// <<--- b.target.value won't compile... was expecting to get my value from input field

Answer 1

问题是，targetDOM 事件的类型EventTarget如您在此处看到的那样https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L3661仅泛型EventTarget类型有几个方法。

在您的情况下，您确切知道目标中将包含哪种元素。因此，为了告诉编译器您target拥有该value属性，您需要将其转换为更具体的类型（`HTMLInputElement 例如https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.生成的.d.ts#L5248 )

我不认为你可以一次性做到这一点（或者至少我不知道有一种技术可以做到这一点），所以你需要另一个map.

const latitudeMinValue$ = latitudeMinimum$
  .map(event => event.target)
  .map((element: HTMLInputElemnet) => element.name)

const latitudeMaxValue$ = latitudeMaximum$
  .map(event => event.target)
  .map((element: HTMLInputElemnet) => element.name)

const latituteRange$ = xs.combine(latitudeMinValue$, latitudeMaxValue$)
  .map(/*([minValue, maxValue])*/); 

一种更简洁的方法（因为我们重复了map().map()两次，所以我们不是很干燥）我们可以compose使用xstream.

function eventToTargetValue(event$ Stream<Event>) {
  return event$.map(event => event.target)
    .map((element: HTMLInputElement) => element.value)
}

const latitudeMinValue$ = latitudeMinimum$
  .compose(eventToTargetValue)

const latitudeMaxValue$ = latitudeMaximum$
  .compose(eventToTargetValue)

const latituteRange$ = xs.combine(latitudeMinValue$, latitudeMaxValue$)
  .map(/*([minValue, maxValue])*/); 

希望能帮助到你 ：）