在 TypeScript 中以型別安全的方式刪除物件的空屬性
Published in
Mar 4, 2022
在 JavaScript 的日常開發中，從物件中刪除空屬性是個很常見的操作
現在多虧有了 ES10 的 fromEntries 新語法
我們只需要一行即可完成這件麻煩事：
然而在 TypeScript 中，這不是一種型別安全的做法
舉例來說，我定義了一個 obj 物件，且內含一個為 null 的屬性：
由 TypeScript 自動判斷的型別如下：
然而，這個 obj 物件經過上述方法處理後：
TypeScript 僅會自動判斷出以下型別：
很明顯的，這個新物件不再保有原始的屬性及其型別
如 id: number, title: string, createdDate: string 等
因此，後續我們在利用這個新物件時
就失去了 IDE 所提供的屬性自動完成功能：
那麼，該怎麼提供正確的型別給 fromEntries 方法
並保有 TypeScript 所有的屬性檢查機制呢？
我們能透過 TS 的 Index Signatures 與 Conditional Types 語法來達成：
以下是利用這個自創型別 Valuable 判斷後的結果：
套用了 Valuable 型別，可以發現 TypeScript 自動判斷出了非空屬性
且一併保有了所有非空屬性的型別
不僅確保了型別安全，更使 IDE 的自動完成功能得以正常運作
最後，將上述內容改寫成輔助方法 getValuable，以便未來更易於使用：
可以在我的 GitHub Gist 中查看此輔助方法：https://gist.github.com/miZyind/503c5330016f72c1a0517d3ec0903676
此方法與一般 JS 方法並無差異，僅是在 TypeScript 中確保了型別安全：
