使用 Generics 在 React 中键入 defaultProp 箭头函数方法

Question

这样我们就可以解决一个问题，即我们有一个提供创建样式的方法的接口。它接受泛型并参数化返回类型，如下所示：

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'.这样的错误

有没有人知道我们如何用箭头函数做我们正在用普通函数定义做的事情，如果这是处理它的正确方法？

Answer 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 编译器几乎总是能够为您推断泛型！我尽量避免明确声明它们，除非有一些歧义。