iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

TypeScript 三十天學習日記系列 第 16

Day 16 中場休息,來做點酷東西

好的,Max 的課程進行到這邊,是時候來休息一下,整合前面所學的東西了。要來做的是一個可以讓使用者新增專案的小專案~

專案的結構長這樣:
https://ithelp.ithome.com.tw/upload/images/20211001/20131989iPgQ8MkW0E.png

HTML 的 head 簡單的引入了 css 檔跟 JavaScript 檔,說明一下 body 的架構:
https://ithelp.ithome.com.tw/upload/images/20211001/20131989OuSvABP8OV.png
https://ithelp.ithome.com.tw/upload/images/20211001/201319894srhixFZ0M.png
上方跟下方的 template 們是要讓 JavaScript 透過 id 動態渲染資料進來,我們要做的事是抓取到使用者在表單輸入的內容,然後個別驗證 Title、Description、People 的內容,最後按下 ADD PROJECT 按鈕送出一個新的 Project,最後會顯示在下面的 List 裡面。

開工!

一開始先 npm install 下載套件,然後下 tsc -w 指令來自動監看並編譯 .ts 的檔案。我們先來把表格渲染出來吧!Max 帶我們練習物件導向的寫法:

class ProjectInput {
  templateElement: HTMLTemplateElement
  hostElement: HTMLDivElement
  element: HTMLFormElement

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement
    this.hostElement = document.getElementById('app') as HTMLDivElement

    const importedNode = document.importNode(this.templateElement.content, true)
    this.element = importedNode.firstElementChild as HTMLFormElement
    this.attach()
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element)
  }
}

const prjInput = new ProjectInput()

上面做了幾件事情:

  1. 取得使用者輸入的 template 跟要渲染的 div,為了讓 constructor 裡面可以存取到 templateElementhostElement,要先在 class 寫好 field。另外 TypeScript 不知道用 getElementById 方法取到的值是不是真的如同在 field 設定好的型別以及是不是 null,於是用了驚嘆號確保一定會有這個值以及做了 type casting。
  2. 再來就是要把使用者輸入的值給拿到,這邊用了 importNode 方法,複製了一份指定節點的內容,第二個參數是指說要不要把全部的內容都一併複製。
  3. 建立一個 attach() 方法在 hostElement 插入拿到的值。
  4. 建立一個 ProjectInput 的實例。

https://ithelp.ithome.com.tw/upload/images/20211001/20131989z4nk499QBE.png

畫面出來了!

今天的學習筆記就到這邊,明天是假日,應該可以寫多一點~謝謝閱讀。:)


上一篇
Day 15 Decorator Part - 3
下一篇
Day 17 中場休息,來做點酷東西(取值 & 驗證)
系列文
TypeScript 三十天學習日記24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言