深入探討typescript類型推斷的微妙之處：四種函數返回值類型定義的等價性及聯合類型下的類型安全
本文深入分析typescript類型推斷機制，解釋看似不同的函數類型定義如何得出相同結果，并解決聯合類型場景下的類型錯誤。
首先，我們觀察四種getReturnType類型定義：
type getReturnType1<T> = T extends (...args: never) => infer R ? R : never; type getReturnType2<T> = T extends (...args: never[]) => infer R ? R : never; type getReturnType3<T> = T extends (...args: any[]) => infer R ? R : never; type getReturnType4<T> = T extends (...args: any) => infer R ? R : never;
這四種類型定義都旨在從函數類型中提取返回值類型。雖然參數類型(never, never[], any[], any) 不同，但它們在類型推斷中對返回值類型R的推斷結果并無影響。extends關鍵字關注的是函數類型的結構，而非參數的具體類型。只要函數類型匹配，infer R都能正確推斷出返回值類型。因此，這四種定義實際上是等價的。
接下來，我們分析一段代碼，它展示了聯合類型和條件類型結合時可能出現的類型錯誤：
type Props<T extends Major | ResCategoryLabel> = { labels: T[]; setSelect: (index: number, label: T extends Major ? Major : ResCategoryLabel) => void; xxx: any; // 省略其他屬性 }; const changeSelect = ( index: number, label: Major | ResCategoryLabel, e: React.MouseEvent<HTMLAnchorElement> | React.TouchEvent<HTMLAnchorElement> ) => { setSelect(index, label); activeTabToCenter(e.currentTarget as HTMLElement); };
Props類型定義中的setSelect函數參數label的類型推斷存在問題。條件類型T extends Major ? Major : ResCategoryLabel試圖根據T的類型來確定label的類型。然而，由于T是Major | ResCategoryLabel的聯合類型，當T的實際類型未知時，編譯器無法確定T是Major還是ResCategoryLabel，導致label的類型推斷失敗。 問題并非條件類型本身，而是它在聯合類型上下文中的應用。
解決方法是直接使用Major | ResCategoryLabel作為label的類型：
type Props<T extends Major | ResCategoryLabel> = { labels: T[]; setSelect: (index: number, label: Major | ResCategoryLabel) => void; xxx: any; // 省略其他屬性 };
這樣，setSelect函數的參數類型明確，避免了類型錯誤，提高了代碼的可讀性和可維護性。 這體現了在處理聯合類型時，有時需要放棄條件類型帶來的精細化類型控制，以換取更清晰和安全的類型定義。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
