Vue 3 script setup defineProps 的坑
問題
最近筆者在學習如何於 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料來自 GraphqlZero ，結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 這個 API 來傳遞 Post 這筆資料，於是很天真的在 <script setup> 裡面寫：
原以為可以輕易地使用自訂型別...
結果意想不到的事情發生了，竟然在 runtime 發生 ReferenceError 錯誤
What? TypeScript 跑到 runtime 了？？
推測原因
針對此問題，猜測原因有兩種可能：
- 這是 Apollo Client 的坑
- 這是 import type 的坑
- 這是 Vue 在 TypeScript 的坑
於是我看了一下範例程式碼，發現自己在 Apollo Client 使用上應該是沒有錯誤。找了一下網路文章，也都沒有提到 Apollo Client 會造成 TypeScript 在 runtime 報錯的案例。
那麼，會不會是 import Post 這個型別時出了什麼差錯？於是我查了一下 TypeScript 關於 import type 寫法的說明：
裡面有提到可以在 tsconfig 裡面 用 "importsNotUsedAsValues" 這個屬性，來避免 type 被當成 JavaScript 變數處理。我修改了一下 tsconfig.app.json 檔案：
vite 和 Vue 官方把 tsconfig 拆成好幾份，足見 TS 有多麻煩
解決方式
以上嘗試都沒有改變結果，後來我逐行檢視，發現問題可能出在 defineProps 定義 post 的型別時：
這裏是使用自訂義的型別，而非 Vue 官方提供的 String、Array、Object 等型別定義，問題是出在這嗎？
在 Vue 文件的 <script setup> 一節中提到，雖然有支援自訂型別，但太過複雜的型別定義， Vue 可能還是會無法辨識，把它當作一般的 runtime 變數。讓我們來看看 Post 這個型別的內容吧。
如此複雜的型別定義
於是，我想到既然 Post 是一個物件，若使用 Object 配合 TypeScript 的 as 做型別斷言，或許可以成功？
object as Post...總算解決型別定義問題
之後終於讓 TypeScript 把 Post 當成型別定義，不會在 runtime 報錯了。這個坑還真是深，且筆者還注意到，若在 defineProps 使用 Post [] ，不會有任何錯誤，可能 TypeScript 會讓它 fallback 為一般的陣列吧⋯⋯
