tsc 一直說 0 error——因為它早就沒在檢查任何東西了

背景

bopomofokids.com 是我幫孩子做的純前端 React SPA——沒有後端，除了 Playwright e2e 跟 Vite 的 build 之外沒有其他測試框架。它的 lint 腳本就只是 tsc --noEmit；沒有 ESLint，沒有另外的 type-coverage 工具。 這一行指令,就是整個專案的靜態分析安全網。

tsconfig.json 沒開 strict,也沒開 noImplicitAny——這是刻意的選擇,讓一個 單人 side project 的型別檢查保持輕量,不用為了一個人的 codebase 引進一大套規則。 而正是這個寬鬆,讓這件事悄悄溜了過去。

到底發生了什麼

不知道什麼時候,@types/react 跟 @types/react-dom 從 node_modules 裡消失 了——不是 package.json 被改過,只是某個環境裡它們其實沒被裝進去。npm run lint 照樣跑。照樣吐出 0。

這才是驚訝的地方:一個到處被 import 的模組,它的型別套件不見了,理論上應該是 最吵、最藏不住的那種失敗。結果完全不是,原因出在 TypeScript 怎麼處理一個找不到 宣告檔的 import。

具體來說,這悄悄關掉了:

// useCallback 的泛型推斷——callback 的參數/回傳型別
// 不再被推斷或檢查;TypeScript 會接受任何傳進去的東西
const onSelect = useCallback((symbol: BopomofoItem) => { ... }, []);

// React.FC<Props> ——每個元件的 prop 型別檢查
// 'React' 解析成 any 之後,整個泛型都是死的
const QuizCard: React.FC<QuizCardProps> = ({ item, onPick }) => { ... };

// JSX 本身——打錯的 prop 名、不存在的 prop、型別錯誤,
// 一旦 JSX namespace 沒有型別,全部都不會被標出來
      any 悄悄吞掉的東西
    

一個打錯字的 prop 名、一個給錯資料形狀的元件、一個帶錯參數型別的 hook——這些 本來正是 tsc --noEmit 存在的理由,結果全部都不再被抓到,而且沒有任何 error、 warning 或 exit code 的變化會告訴你這件事。

為什麼 skipLibCheck 解釋不了這件事

這個專案的 tsconfig.json 有開 skipLibCheck: true,聽起來好像有關係,但其實 不是原因。skipLibCheck 只會跳過檢查已經存在的 .d.ts 檔案的內容——它不會 替一個根本沒裝的套件生出型別宣告。這裡的失敗發生得更早一步:根本沒有 .d.ts 可以跳過檢查,所以 TypeScript 直接退回它對「找不到型別的 import」的預設答案, 也就是 any。

這種事到底怎麼會被發現

CI 跑出來的結果完全看不出這件事。不管 codebase 真的乾淨、還是型別檢查器早就 悄悄不再看任何 React 相關的東西,「0 error」印出來都長得一模一樣。唯一的破綻是 行為上的:tsc 對一個理論上該報錯的錯誤——一個元件上不存在的 prop、一個帶錯 型別參數的 hook——顯得異常淡定,這就是該去檢查檢查工具自己的輸入、而不是它正在 檢查的程式碼的訊號。

這次學到什麼