从 TypeScript 到 view.tree

你在

快速上手里写的那个组件，是一个普通的 TypeScript 类。它能编译、能运行，而且是框架支持的几种组件描述方式之一。它同时也逼你在脑子里记住四件跟组件本身无关的事。本页逐个拆开它们，并给出消掉每一件的那行 view.tree。最后再看编译器生成的代码，你可以自己核对：树不是第二套运行时，它产出的正是你已经写过的那个类。先把那份文件再放一遍，方便对照：1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}在 GitHub 上编辑此页这有帮助吗？是否上一页快速上手下一页项目结构本页内容子组件由你创建，也由你缓存数据往哪边流，由操作符说了算双向绑定离「悄悄变成只读」只差一次按键一段可本地化的文本，在你为它造出键之前只是字符串完整的组件编译器产出什么手写的类交不出去的东西体量该写哪一种