又更改了讀取資料以及資料驗證的方式
* TypeScript 基本知識
TypeScript 可以使用 Union Type 限制物件的值域
比如說一個型別如下
type BoothNumber = {row: string, number: number}
可以輸入各種 string 和 number
但是 domain 上實際的 row 只能是 A or B,
而且是 A 的時候 number 只能是 1 or 2,
B number 只能是 1, 2, or 3
可以宣告以下型別
type BoothNumber = {row: "A", number: 1 | 2} | {row: "B", number: 1 | 2 | 3}
達成 compile time (還是 build time?) 的型別檢查,避免不合理的值例如
const a: BoothNumber = {row: "ZZZ", number: 87}
出現
* 原來的作法
原來在填資料的時候是完全使用 TypeScript 的型別系統達到資料驗證這項目標
流程:
1. 人工產生 TypeScript 物件 Array<BoothNumber>
(這裡已經可以讓 IDE 在遇到不合理的值就報錯)
2. 程式建置並讀取物件 Array<BoothNumber>,理論上可以保證沒有不合理的值
這裡遇到的問題是第一步花費的時間真的太多了,因此思考別的解決方案
* 更新後的做法
1. 人工產生 CSV 檔,因為是直接依照資料來源的欄位填寫,因此只需要複製貼上
資料來源範例:https://www.f-2.com.tw/index.php?q=ff/169824
2. 使用 TypeScript 腳本讀取 CSV 檔並且轉換為物件 Array<BoothNumber> 再轉換成
JSON 檔
3. 使用 Joi 函式庫編寫 data schema 驗證 JSON 檔是否為 Array<BoothNumber>
(這裡找了很久就是沒有可以直接使用 TypeScript 的型別定義去驗證的方法)
4. 程式建置並讀取 JSON 檔並且強制轉型成 Array<BoothNumber>
理論上不能保證沒有不合理的值,但是第三步驗證過了
這種方法大幅減少了人輸入的時間
也應該(?)可以保證資料在程式建置時的正確性,但是 TypeScript 沒有原生支援資料驗
證滿可惜的
※ 引述《nh60211as (xXx_5354M3_31M0_xXx)》之銘言:
: 考量到如果是要在活動會場當天使用網路可能會不穩定
: 所以加了手機安裝離線程式教學
: https://i.imgur.com/eu2GXKH.png
: https://github.com/nh60211as/FfMapMarker/blob/master/docs/
: install_on_andriod.md
: 因為是用 PWA 包裝的,所以可以讓網頁就像 Android app 一樣像一個程式在管理
: iOS 好像也行,但是我沒錢買 iPhone
: 然後買狗攤
: Day 1 Day 2 Day 3
: 角角吉診室 E27,E28
: 台北人 S03,S04 S33
: 企鵝冰屋 S05 S30
: 壞孤兒 T27,T28
: 龍龍 S25,S26 S25,S26
: 百合室內盆栽 S27 S27
: ※ 引述《nh60211as (xXx_5354M3_31M0_xXx)》之銘言:
: : 懶得用手畫地圖了
: : 科技時代就該把可以離線做的事情搬上網頁
: : https://i.imgur.com/UhPki5S.png
: : 看了一下有買狗的好像是在第二天 S 區
: : https://nh60211as.github.io/FfMapMarker/