简介
QuickApp TS 是什么
就是用ts来开发快应用的尝试,现在有两个npm包。quick-module和quick-types。
- quick-module: 一个翻译器,把tsx文件翻译成ux和js文件
- quick-types: 一系列.d.ts文件,里面包含写快应用程序时会用到的类型定义
预期还会有一个做单元测试的包。因为加了一步翻译,所以组件实例就能完全自己控制了,这样做单元测试可能会比较方便。
预览
以前是写ux文件,然后现在是写tsx文件,一个组件大概就变成这样的写法:
import styles from "./main.css";
import TodoItem from "./todo-item/todo-item";
class Main implements QuickApp.IComponent
{
props = {
foo: 1
}
template()
{
return (
<div class="main-page">
<div class="input">
<input class="input-text" type="checkbox" onclick={this.handleInput}></input>
<TodoItem fooParam={this.props.foo}></TodoItem>
</div>
</div>
);
}
handleInput(e: QuickApp.ClickEvent)
{
console.log(arguments);
}
}
export default Main;
然后使用quick-module翻译之后,就生成两个文件:*.ux和*.js
<import src="./todo-item/todo-item.ux" name="todo-item"></import>
<template>
<div class="main-page">
<div class="input"><input class="input-text" type="checkbox" onclick="{{handleInput}}"></input>
<todo-item foo-param="{{foo}}"></todo-item>
</div>
</div>
</template>
<script>
export { default } from "./main.js";
</script>
<style src="./main.css"></style>
class Main {
constructor() {
this.props = {
foo: {
default: 1
}
};
}
handleInput(e) {
console.log(arguments);
}
}
const __INSTANCE__ = new Main();
const props = Object.getOwnPropertyNames(Main.prototype);
props.forEach(prop => {
if (prop !== "constructor") {
__INSTANCE__[prop] = __INSTANCE__.__proto__[prop];
}
});
export default __INSTANCE__;