Typescript 从createSelector工厂推断返回类型_Typescript_Redux_Reselect

Typescript 从createSelector工厂推断返回类型

typescript redux

Typescript 从createSelector工厂推断返回类型,typescript,redux,reselect,Typescript,Redux,Reselect,我正在尝试将reselect集成到一些redux连接的组件中。根据重新选择（）的文档，在处理传入的道具时，为了确保选择器被正确地记忆，您基本上为createSelector创建了一个工厂函数，因此调用connect（）的每个组件都会获得自己的选择器及其记忆状态。这是有道理的，而且我使用的是TypeScript：界面上传ProfileOwnProps{ someValue：字符串； } const getUploadProfile=（state:AppState，props:UploadProf

我正在尝试将reselect集成到一些redux连接的组件中。根据重新选择（）的文档，在处理传入的道具时，为了确保选择器被正确地记忆，您基本上为

createSelector

创建了一个工厂函数，因此调用

connect（）

的每个组件都会获得自己的选择器及其记忆状态。这是有道理的，而且我使用的是TypeScript：

界面上传ProfileOwnProps{
someValue：字符串；
}
const getUploadProfile=（state:AppState，props:UploadProfileOwnProps）：UploadProfileState=>state.uploadProfile；
const getCustomer=（state:AppState，props:UploadProfileOwnProps）：CustomerState=>state.customer；
const UploadProfileSelector工厂=（）=>createSelector（getCustomer，getUploadProfile，
（customerState，profile）=>({
customerId:customerState.customerId，
轮廓
}));
类型uploadProfileSelectorProps=ReturnType；
const connectUploadProfile=connect（（）=>{
常量选择器=uploadProfileSelectorFactory（）；
常量mapStateToProps=（状态：AppState，道具：UploadProfileOwnProps）：uploadProfileSelectorProps=>{
返回选择器（状态、道具）；
};
返回MapStateTops；
}，上载操作）；

OwnProps

只是一个占位符，在这种情况下，状态根本不依赖于它，但在其他情况下可能依赖于它。double

ReturnType

构造让我有点烦，但它完成了任务。现在，实际问题是：

uploadProfileSelectorFactory

缺少显式返回类型。在这种情况下，我让eslint对我大喊大叫。我如何说服TypeScript告诉它工厂函数的返回类型是

createSelector（）

返回的类型？它确实正确地推断了返回类型，因此它不会导致eslint之外的任何问题。我看到一些选择：

只需告诉eslint忽略该行的返回类型要求。虽然最简单，但我真的不喜欢它

显式定义组合器函数产生的类型，然后让工厂函数返回

CreateSelector

的类型，在这种情况下，这将是一个相当混乱的

outputParameterSelector T>

，如果添加另一个选择器，我必须记住要更改它

以某种方式说服TypeScript给我返回类型

createSelector（）

，而不实际调用它。这可以通过显式定义组合器函数的返回类型来完成，尽管我还没有尝试过。这可能也会消除

ReturnType

业务，代价是让我保持组合器函数及其返回类型的同步

将

重新选择

或类似内容加入到混合中，希望不会出现此问题

调用一些解决整个问题的打字脚本黑魔法

我希望5和3的组合，不过如果需要的话我会选4。不幸的是，我发现的每个示例都只使用类型推断，从来没有处理过这个问题。

您知道

createSelector

返回什么，因为最终它只是一个选择器，选择

customerId

和

配置文件

。通过重新选择创建的选择器必须具有额外的属性，如

重新计算

和

重置重新计算

，但这些对于react redux来说并不重要。我们只想知道选择器接受什么参数以及返回什么

这是您正在选择的内容：

type Selected = UploadProfileState & Pick<CustomerState, 'customerId'>

但这是一个冗长的过程，我们在多个地方有相同的两个参数，因此，如果您想定义一个帮助器类型：

type UploadProfileSelector<Return> = (state: AppState, props: UploadProfileOwnProps) => Return;

type UploadProfileSelector=（state:AppState，props:UploadProfileOwnProps）=>返回；

或者更广义地说：

type ComponentSelector<Props, Return> = (state: AppState, props: Props) => Return;
type UploadProfileSelector<Return> = ComponentSelector<UploadProfileOwnProps, Return>;

type ComponentSelector=（state:AppState，props:props）=>Return；
类型UploadProfileSelector=ComponentSelector；

您可以将其用作返回类型：

const uploadProfileSelectorFactory = (): UploadProfileSelector<Selected> =>

const UploadProfileSelector工厂=（）：UploadProfileSelector=>

您确实知道

createSelector

返回的内容，因为最终它只是一个选择器，用于选择

customerId

和

profile