我刚刚尝试在Cycle.JS中使用一个简单的切换示例来实现Typescript。
设置如下:
包.json
{
"name": "parcel-cycle-playground",
"version": "0.1.0",
"main": "index.js",
"scripts": {
"dev": "parcel index.html"
},
"dependencies": {
"@cycle/dom": "^23.1.0",
"@cycle/http": "^15.4.0",
"@cycle/run": "^5.7.0",
"xstream": "^11.14.0"
},
"devDependencies": {
"parcel": "^2.8.0",
"process": "^0.11.10"
}
}
tsconfig.json(复制自Snabbdom主页)
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "Fragment"
}
}
应用程序.jsx
import { jsx, VNode } from "snabbdom";
// import xs from "xstream";
import run from "@cycle/run";
import { makeDOMDriver } from "@cycle/dom";
const intent = sources => {
const domSource = sources.DOM;
return {
toggleClicked$: domSource.select('.input').events('click')
}
}
const model = actions => {
const toggleState$ = actions.toggleClicked$
.map(ev => ev.target.checked)
.startWith(false)
return toggleState$
}
const view = (state$): VNode => {
return state$.map(toggled =>
<div>
<input type="checkbox" className="input" /> Toggle me
<p>{ toggled ? 'ON' : 'off'}</p>
</div>
)
}
const main = sources => {
const actions = intent(sources);
return {
DOM: view(model(actions))
}
}
run(main, {
DOM: makeDOMDriver('#app')
});
复选框呈现为文本输入,类型标记消失:
我刚开始使用Typescript,不知道问题出在哪里。
这个简单示例的普通版本运行得非常好。在切换到typescript之后,输入字段立即呈现为文本输入。
1条答案
按热度按时间vybvopom1#
在Snabbdom文档中,还有另一种语法:
不知道为什么没有 typescript 它也能工作。也许是在包裹的引擎盖下有巴别塔。