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

的事情是在提取输入文本对象，一个DOM事件的target是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.generated.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()两次，所以我们不是很干），我们可以使用xstream给出的compose操作。

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])*/); 

希望它能帮助:)