typescript中的map，How to get types from arrays

前言

我們都知道要把自定義物件轉成型別在ts裡面要使用typeof，

const config = {

"self": {

"method": "get",

"uri": "self"

},

"login": {

"method": "post",

"uri": "backend/login"

},

"logout": {

"method": "get",

"uri": "logout"

}

}

const keys = keyof type config // "self" | "login" | "logout"

但假設今天是一個陣列，例如

const datas = [

{

"key": "collect",

"value": "Collect"

},

{

"key": "ffc",

"value": "FFC"

},{

"key": "switch",

"value": "Switch"

},

]

那我要把所有的key取出來變成類別該怎麼寫呢，總不能真的用js的map吧，實際上就是，你上網找ts map也只會找到集合的Map，所以該怎麼寫呢，我們直接看code

let key = (typeof datas)[number]["key"]

沒錯，就是這麼簡單，最後你就會發現key的類別是string.....那我幹嘛這麼大費周章，寫這麽多字只為了宣告string！！

先別急，我們要再做一點調整，不過不是類別宣告，而是資料

const datas = [

{

key: "collect",

value: "Collect",

},

{

key: "ffc",

value: "FFC",

},

{

key: "switch",

value: "Switch",

},

] as const

let key = (typeof datas)[number]["key"] // "collect" | "ffc" | "switch"

加上一個 as const資料就會被定型，在取用key時就可以取道固定的值了。

不過const資料之後，或許還是會產生其他的問題，例如realonly {...}不符合Rcord<string, any>之類的，這些問題......改天再說吧！以上，下班！

參考網站

vue要產生一個component在body要怎麼做

前言

相信很多小夥伴跟我有相同的疑問，或是使用過modal這個套件，會在body增加一個可控制的component，我一直以為是createElement相關的方法去做到的，一直到今天.......

今天在線上抗到一個component，來人我們直接上範例

<teleport to="body">

<p> 移動我到 body </p>

</teleport>

最終結果就會是

<body>

<div id="app">......</div>

<p> 移動我到 body </p>

</body>

關於teleport有兩個屬性to跟disabled，to就是要移到哪裡去，支援css選擇器，disabled就是有沒有生效，亦或是留在原地

以上簡短分享

在vue裡面寫pug真的有這麼恐怖嗎？

前言

許久之前有開過一個vue3專案，template我使用pug來寫，基本上用得還算順利。除了一開始不會自動排版，但也靠vetur解決了（雖然vetur那時跟volar打架，但後來也還算完美落幕）。一直到這兩天我從新起了一個專案，憑藉對ts及vue的熟悉，我突然感覺到不太對勁：不光是template幾乎不會報錯、ts不會自動跳出提示，連格式化也失靈了。因此我開始上網求助

網路大神果然不會讓我失望，清一色都是叫我儘早放棄，把pug說的要多糟有多糟，支援要多差有多差。

洨編連團隊的道歉信都寫好了，準備要把所有template改回html，最終看到圖片中那則留言，想說死馬當活馬醫吧。再試一回，結果真讓我試出來了。以下來記錄一下

備註一下，以下小編都是使用vscode及相關套件進行處理

首先是format的部分（prettiers extension請先安裝好）

yarn add -D prettier @prettier/plugin-pug

// .prettierrc

{

"semi": false,

"trailingComma": "es5",

"singleQuote": false,

"printWidth": 150,

"tabWidth": 2,

"pugClassNotation": "attribute",

"pugExplicitDiv": true,

"pugSortAttributes": "asc",

"pugSortAttributesBeginning": [],

"pugSortAttributesEnd": [

"v-for",

"^:",

"^@",

"^v-"

],

"plugins": ["@prettier/plugin-pug"]

}

這樣就可以使用prettier進行format了（我還以為prettier什麼都支援，原來需要外掛），後面那些設定大家可以自行調整，洨編是依照個人喜好設定

再來是vscode typescript compiler的部分

yarn add -D @vue/language-plugin-pug

// tsconfig.json

{

  "vueCompilerOptions": {

"plugins": ["@vue/language-plugin-pug"]

}

}

這樣類別及型別錯誤什麼的就可以正常辨識了。

不過網路大神講得這麼恐怖，或許其中還有什麼未知的問題等待我去挖掘，總之我提出的三個問題暫時是解決了，至於未來.....的事交給未來的我去解決吧！

又過了驚險的一天，收工下班！

HD鬼故事N+1集

在許久許久之前，有位異常懶惰的工程師，正躺絕對不坐，能做絕對不站。如果能夠自動化的事情我就絕對不會親自動手，所以凡舉布版打包一類的瑣事，這位工程師通通交由腳本去執行。但事情往往不會這麼順利

在他的服務單位有一個傳統，正式機需由後端或維運來佈版，至於背後的原因，那可能又是另外一則鬼故事了。

測試機在沒人管的前提下，當然由這位工程師說了算，直接從github actions ci走腳本一路打包布版版到機器，全程無尿點，舒服！至於正式機......總之我秉持你愛怎樣我配合的想法，工程師就寫了個腳本打包，然後傳壓縮檔給後端讓他們自己去發揮。多日來倒也算相安無事，但鬼故事總是發生得措手不及那才叫做鬼故事啊！

這專案再一次大更版後，正式環境出現了不明原因的錯誤，且多日debug無果，老闆開始檢討起開發流程，覺得在測試與正式間，應該再多一個uat環境。這想法原則上沒問題，問題在後面。老闆覺得換皮站應該每個皮的系統是獨立的，防止換Ｂ皮結果Ａ皮壞掉.....從技術面向來看，這位工程師已經不知道要從何吐槽起了。總之還是那句，你愛怎樣怎樣。

老闆最終再提一個想法，應該要加快布版速度，防止用戶有不良體驗。

看到這裡大家應該覺得，那不就測試機的佈版腳本，就改一下環境變數直接上到正式機就好。工程師原本也是這樣想。但很可惜關於佈版前端工程師並沒有話語權。接下來主管一系列指令更是殺得工程師手足無措

關於快速佈版，主管提出使用cicd。這乍看下沒有問題，問題在工程師以為他也是github actions腳本寫一寫佈版，大錯特錯！他把佈版腳本寫進寶塔裡面，使用人工點擊腳本佈版

然後關於uat，工程師原本以為他會叫工程師開一個uat分支，多一個環境變數檔，當uat push時觸發佈版。結果完全不是我想得這麼回事！每當程式要上uat，會叫工程師把開發分支merge回master。（先別噓），然後他再點“按鈕”進行uat佈版，等測試完成後再點按鈕上正式。

哎.......就請問如果uat測試沒過，要改東西，這時有hotfix趕著上版怎麼辦！算了～只是一個小小前端工程師～如果能保一切順利老闆開心，這位工程師願意陪你們演猴戲，但好巧不巧事情就這麼發生了......

因為這套系統在打所有api前，會先讀取本地ip.txt，把裡面的網址進行解析測試，看哪個通就走哪個，但當初也不知道怎麼規劃的ip.txt放在根目錄，有開發過vue vite的小夥伴一定知道如果打包完要在根目錄，那檔案開發時要放在/public裡面，但事實是，ip.txt不歸前端管，是歸維運管，所以不應該放到前端專案中，等於打包時不應該打包到ip.txt這隻檔案，但最終打包出來卻要有這個檔案。

這聽起來很饒口，但實際上就是這樣。那應該怎麼做到呢？很簡單，測試機腳本是先下指令清光ip.txt以外的所有檔案，再把壓縮包直接壓進來，這樣就可以ip.txt不會被覆蓋及刪除。

當然主管也不笨，他在package.json中使用指令，在打包完把指令路徑的ip.txt複製到指定目錄。這樣原本上也沒什麼問題，但問題出在寶塔，例如yarn build && cp ../ip.txt ./dist/，這樣理論上會先打包在複製檔案，但不知道為什麼如果是按按鈕下指令，最終會看不到ip.txt這隻檔案，或許是寶塔優化了腳本變成多執行序執行？？導致一開始就複製進去，在build完後一並被刪除，不知道，這位工程師並不想了解。總之在改成這樣上版後，正式機癱瘓了，原因是找不到ip.txt。死活也找不到為什麼，最終只好一遍又一遍人工把ip.txt複製進去，可喜可賀......個頭啊！所以當初導入cicid的意義在哪，還是要人工啊！

後記

過程中工程師無論明著說，暗著說，告訴他們已經有寫好腳本。然後把專案管理權全數交數去，主管明明就可以看著腳本知道過程中到底都發生些什麼事，卻一行都不看，偏偏選用這麼....不自動的方式去打包，唉～槽點滿滿。真的搞不清楚主管到底是強還是弱了～

最終這位工程師將何去何從，下場又是如何，請靜待下回分曉

3/21鬼故事更新

果然就在發文兩天後就生了塞車，事後工程師主動請纓才讓事件有了完美的帷幕，至於日後還會發生怎樣有趣的事呢，讓我們拭目以待

在前端寫後端？如何寫出不會被快取清掉的資料

前言

前陣子接到一個需求，要前端產出一個uuid，傳給後端當身份驗正。

冷靜點各位，先別噴！雖然身份驗證坐在前端前所未聞，但任務確實就是這樣。

開發過前端的都知道，前端存資料選項沒幾個，就算我把資料存local storage，一但遇到清除快取也會消失。一開始ＰＭ那邊當然是說沒關係，我們盡量，但背後還是不斷給壓力說看有沒有辦法解決......這擺明就是後端的工作，我實在想不明白為什麼必須得前端做想，他們困難點到底在哪，相當然爾我兩手一攤說沒有辦法，結果主管有天突然就跳出來了說他想到更好的方法了！！

我們先來解釋一下他的想法，簡單說把產生uuid的做成單獨的一個站，然後除了存入local storage之外，還要用postMessage的方式將產生的uuid回傳，看到這裡聰明的小夥伴應該猜到，在原專案用iframe將上面這個站嵌入就可以了，變且addEventListener("message", (e) => { e.data })去監聽回傳內容就好。

這樣除非對方真的很專業開啟了產生uuid的站並清除快取，不然在原本的站怎麼清uuid都會保持不變，我附上code

// uuid page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SSO Page</title>

</head>

<body>

<script>

function generateUUID() {

var d = new Date().getTime();

if (typeof performance !== 'undefined' && typeof performance.now === 'function') {

d += performance.now(); // 使用性能計時器來增加隨機性

}

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {

var r = (d + Math.random() * 16) % 16 | 0;

d = Math.floor(d / 16);

return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

});

}

var uuid = localStorage.getItem('uuid');

if(!uuid){

uuid = generateUUID();

localStorage.setItem('uuid', uuid);

}

// 發送 local storage 中的數據給父頁面

window.parent.postMessage(uuid, document.referrer);

</script>

</body>

</html>

// parent page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Parent Page</title>

</head>

<body>

<iframe src="https://uuid.com" width="1" height="1" style="display:none"></iframe>

<script>

// 接收來自子 iframe 的消息

window.addEventListener('message', function(event) {

  console.log(event.data) // uuid

}, false);

</script>

</body>

</html>

後記

我雖然滿佩服主管可以想到這種奧步的，且這招不光是只能用來存資料，也可以拿來做些偷雞摸狗的事情，例如我第一分工作就看到老闆使用iframe更新主頁面的畫面.......某種意義上來說也是ajax拉，把部分後端的工作移到前端來做。不考量安全性的話......天啊，我好不想想起當時那個畫面＝＝大家還是考量一下安全性，珍惜生命，少用iframe吧

要改變component的樣式為什麼不是用v-deep

前言

在與前同事隨意尬聊的狀況下，前團是提出要我幫他看code的需求，他說他一直無法改變component的樣式，我想說不過就是v-deep的麽簡單的事情，所以想也不想就答應了，殊不知最終我搞了兩個小時的故事....

問題起源於他使用了套件vue-advanced-chat來製作聊天視窗，正確來說是前同事使用，所以他也只是背鍋而已。然後公司需求很多，然後這套件很多功能其實都無法達成需求。這故事告訴我們，選元件要慎選，如果客製化需求太多，自己造輪子不一定是不好，至少彈性足夠。

接下來要說說這次遇到什麼問題，就是audio的樣式在某種解析度會跑版，需要用css去修正，但無論用v-deep或是global寫css，死活都是吃不到，正一籌莫展之際，我看到了幾個關鍵字。

首先第一個為什麼這個套件的tag還可以保持原樣<vue-advanced-chat>，然後在tag下面出現#shadow-root(open)的字樣，下面可以展開，上次我看到類似的景樣是在iframe裡面，如果這狀況跟iframe真的是類似，那確實css selector無法吃到裡面也很正常。我上網查了關鍵字發現確實是類似的情況shadow dom，簡單說被web component包裝成一個原生tag了。

我原本想說有了關鍵字剩下就簡單了，所以去查要怎麼樣才能讓shadow dom吃到css，查了半天都說有:host之類的選擇器可以用，但每個都是過了一樣沒有效果，但看到這網站說明後才大致明瞭這東西必須在寫web component當時，也就是內部撰寫，所以也還是沒辦法達成我要的效果，且裡面也明確表示css是無法從外層直接影響內層的樣式。

正當我想放棄時我想到，既然css無法做到，能否使用javascript去強制修改呢？結果還真讓我找到解法，要分成兩個步驟來說，首先你要可以選擇到shadow dom，做法也不難，就是你要在選擇到web component之後，直接.shadowRoot就可以選到dom，之後再創造一個style並把內容寫好寫滿，之後appendChild進去就好，我們直接來看code

// 寫一個可以選擇到shadow dome的selector

const querySelectorAll = (node,selector) => {

const nodes = [...node.querySelectorAll(selector)],

nodeIterator = document.createNodeIterator(node, Node.ELEMENT_NODE);

let currentNode;

while (currentNode = nodeIterator.nextNode()) {

if(currentNode.shadowRoot) {

nodes.push(...querySelectorAll(currentNode.shadowRoot,selector));

}

}

return nodes;

}

// inject css

const style = createElement("style")

style.innerHTML = `

.class { ...... }

......

`

document.querySelector("custom-web-component").shadowRoot.appendChild(style)

這樣就大功告成拉。

後記

我就說好好的vue component為什麼要包成web component，應該是考量到要讓各種框架使用，然後你包沒有關係，為什麼要包成shadow dom，然後你包成shadow dom沒有關係，為什麼還要有bug！！好在大爺我幾十歲了，不怕你！雖然已經一點多了，下班

vscode常常壞掉該怎麼處理

前言

如果有寫typescript的人應該再複製貼上或使用snippets來輔助輸入的人應該很常發現貼上後莫名畫面中出現很多紅線，然後vscode的輔助開發就壞掉了，需要關掉重啟才可以

今天我心血來潮，嘗試使用指令reload window去重啟vscode，這樣確實可以達到不用關閉就可以修復編輯器的效果，但每次都要按command+shift+p 然後再輸入reload...實在有點繁瑣，心想應該可以設定個command+r的快捷鍵讓他自動重啟吧

所以我打開快捷設定，我這邊用英文版，所以我不知道中文版叫什麼名字，可以參考圖片

打開之後找到reload window發現原來已經有快捷了，而且還正好是command+r，但為什麼怎麼按都沒反應呢？後來上網查在知道原來when的這個欄位也要設定，要設定觸發情境

所以在reload window上面點右鍵選擇修改上面點右鍵選擇修改when，然後輸入editorTextFocus

因為壞掉一般都在程式編輯過程吧。設定完之後就大功告成了，再遇到壞掉直接敲快捷就搞定了。

祝大家之後都可以準時下班～啾咪～