javascript - 在 React 中使用泛型為 defaultProp 箭頭函數方法定義類型

所以我們可能會遇到一個問題，我們有一個介面提供用於創建樣式的方法。它接受一個泛型並將返回類型參數化，如下所示：

export interface StyleConfig {
    rootContainer: any;
}

export default interface AcceptsStyles {
    createStyles: <C extends StyleConfig>(theme: any) => C;
}

現在在使用這個介面的類別中，我們正試圖傳遞我們希望 C 成為的介面：

export const defaultProps: Partial<Props<any>> = {
    createStyles: function <ListItemStyleConfig>(theme: any): ListItemStyleConfig { return Styles(theme) },
};

我們已經設法使用普通函數定義使這個工作；然而，如果我們嘗試使用箭頭函數，它會給我們帶來問題：

createStyles<ListItemStyleConfig>: (theme: any): ListItemStyleConfig => Styles(theme),

我不確定我們是否只是以正確的方式對這個進行參數化，還是其他原因，但我們會遇到像這樣的錯誤：Type '<ListItemStyleConfig>() => (theme: any) => any' is not assignable to type '<C extends StyleConfig>(theme: any) => C'. Type '(theme: any) => any' is not assignable to type 'C'.

有人知道我們如何用箭頭函數基本上做我們用普通函數定義所做的事情嗎？以及這是否真的正確的方法來處理這件事？

答案＃1

你可能不需要在你的 createStyles 上使用 <ListItemStyleConfig>，TS 編譯器幾乎總是能夠從你的函數返回值推斷出泛型類型。

createStyles: (theme: any): ListItemStyleConfig => Styles(theme) // As long as Props extends AcceptsStyles, the function will be correctly inferred and valid

根據 Styles 的返回類型，你甚至可能不需要指定返回類型（它可以被推斷），例如。

createStyles: (theme: any) => Styles(theme) // should infer the generic from return type of Styles

或者，取決於 Styles 的簽名（以及它是否使用無界的 this），你甚至可以像這樣直接傳遞它：

createStyles: Styles // equivalent to theme => Styles(theme) as long as binding is the same and Styles takes only a single parameter

TypeScript 編譯器幾乎總是能為你推斷泛型！我會盡量避免明確宣告它們，除非存在一些模糊情況。