iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0

前面中場休息的 Project 今天暫且休一天,來介紹一下可以在 JavaScript 跟 TypeScript 使用以及只有 TypeScript 能夠使用的 Library 吧!

第一個要介紹的是 Lodash,在原生的 JavaScript 是一個很好用的處理資料的 library,如果照著官網上面的操作安裝並且 import 的話,會跳出無法辨識 lodash 這個 module 的錯誤,因為 TypeScript 不認識這個用 JavaScript 寫的 library,那要怎麼用在 TypeScript 上呢?

感謝有各路大神們寫好的 type's package,幫一些用 JavaScript 寫的第三方 library 翻譯成 TypeScript 的樣子,讓我們能夠很容易的使用這些工具,有興趣的話也能到 github 上面看看哦!

像是 Lodash 的話就能夠下載這個套件:https://www.npmjs.com/package/@types/lodash
安裝之後它就會自動幫我們把 Ladash 翻譯成 TypeScript 了!如果想在 TypeScript 專案用其他比較多人在使用卻是用 JavaScript 寫的 library,像是 jquery,那就可以用 @types/jquery 搜尋看看。

第二個要介紹的是 class-transformer,使用情境是有時我們會從後端拿到前端要渲染的資料,但是通常都是 JSON 物件,然後我們再把它轉成 JavaScript 的物件,但這時候這些資料可能沒辦法跟我們前端的程式碼比如說 class 裡面的 method 做連接,必須要透過多寫一些程式碼來把 JSON 資料放到 class 創造的實例才能使用 class 裡面的方法,比如說用 forEach 把每一筆資料都做一個實例,但這樣其實除了要多寫程式碼之外,也浪費了許多效能。

這時候透過 class-transformer 就可以很輕易的把我們想轉換的物件轉換成我們要的樣子,依照指示從 npm 下載之後再 import plainToClass 方法就可以把 JavaScript 物件轉換成 Class 了!另外這個套件也可以用在原生的 JavaScript 上面哦~

最後一個是 class-validate,這個寫了很多個幫忙驗證的裝飾器!!!天阿超級方便,也是只要簡單的 npm 下載就可以直接使用了,裡面提供了許多常用的驗證方法,比如說驗證 email、length、max、min、date、是不是空格......等等。另外不免俗的還是要再次提醒,記得把 "experimentalDecorators": true 打開哦!這個 library 就是專門給 TypeScript 使用的啦!

這幾天工作有點稍微力不從心,給自己信心小喊話一下,希望明天還能繼續 catch up 這個系列嗚嗚,今天的學習筆記就到這邊,謝謝閱讀。:)


上一篇
Day 18 中場休息,來做點酷東西(狀態管理)
下一篇
Day 20 中場休息,來做點酷東西(型別修正跟除點小蟲)
系列文
TypeScript 三十天學習日記24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言