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

时间:2019-02-06 15:13:05

标签: javascript reactjs typescript react-native

因此,我们可以解决一个问题,即我们拥有一个提供用于创建样式的方法的界面。它接受泛型并按原样设置返回类型的参数,请参见下文:

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 个答案:

答案 0 :(得分:1)

您可能不需要<ListItemStyleConfig>上的createStyles,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

或者,取决于样式的签名(以及它是否使用无界的this),您甚至可以像这样直接传递它:

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

TypeScript编译器几乎总是可以为您推断泛型!除非有一些歧义,否则我会尽量避免明确声明它们。