從 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 上編輯此頁這有幫助嗎？是否上一頁快速開始下一頁專案結構本頁內容子元件由你建立，也由你快取資料往哪邊流，由運算子說了算雙向繫結離「悄悄變成唯讀」只差一次按鍵一段可在地化的文字，在你為它造出鍵之前只是字串完整的元件編譯器產出什麼手寫的類別交不出去的東西體量該寫哪一種