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

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

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

1 个答案: