貼文討論：[問題] Zod 的 .optional() 使用方法

留言回覆：hi zod 通常是拿來做表單或 api 資料的型別驗證， 我看到的大多作法是自己定義 type， 加上使用 react 的 ComponentProps， 這樣還可以獲得 html 的原始 props。 ```typescript import { ComponentProps } from "react"; type MyDivProps = ComponentProps<"div"> & { myProp: string; }; const MyDiv = ({ myProp, ...props }: MyDivProps) => { console.log(myProp!); return <div {...props} />; }; ``` 參考 : https://www.totaltypescript.com/react-component-props-type-helper
查看原始貼文與相關留言

感謝回應！

一開始選用 zod 來管理型別，是因為源頭從 API 取得 20 個 key 左右的資料，在有些元件只須使用一小部份，還有變換成 optional、改 key 名稱的需求，剛好這些在 zod 都有方便的語法達成，就開始用了，確實沒考慮到 DOM 本身的屬性

ym
read.cv/ymcheung
熱門搜尋： M 使用 開發 前 部落格 專案 題 工作 c 1 網站 . 分享 第一 C AWS 前端 % 學習 4 2 COM ＣＳＳ 清單 語言 技術 資料庫 作為 測試 作業 結構 研究 研 架構 網頁 套件 app Java AI jav 10 JS 後端 遊戲 主題 id 搜尋 api 20 Css js Git CD ci Ai Github .NET 課程 HTML 練習 GIT for git ui 系列 Javascript 工程師 github 新手 java JAVA Node go 開源 bi html javascript 部署 非同步 查詢 Ml 新創 Vue javasc Python module 回答 node 日期 ejs 乾淨 json 編輯 user ul Html this console ? 入門
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。