Angular NgRx MemoizedSelector的类型定义学习

简介: Angular NgRx MemoizedSelector的类型定义学习

源代码位置:

image.png

export interface MemoizedSelector<State, Result, ProjectorFn = DefaultProjectorFn<Result>> extends Selector<State, Result> {
    release(): void;
    projector: ProjectorFn;
    setResult: (result?: Result) => void;
    clearResult: () => void;
}

MemoizedSelector包含两部分属性:


extends Selector

Selector的定义:一个函数,输入参数类型为State,返回参数类型为Result,


因此,MemorizedSelector,首先它也是一个函数。

image.png


在函数的基础上,MemoizedSelector多了下面四个属性:

image.png


通过Object.assign, 将函数本身同 extends区块里定义的4个属性进行merge:


image.png


export declare type DefaultProjectorFn<T> = (...args: any[]) => T;


同普通函数相比,DefaultProjectorFn的特点在于,限定了返回类型的类型为T, 在消费该类型时,必须指定该类型。


export type AnyFn = (...args: any[]) => any;
export type MemoizedProjection = {
    memoized: AnyFn;
    reset: () => void;
    setResult: (result?: any) => void;
    clearResult: () => void;
};
export type MemoizeFn = (t: AnyFn) => MemoizedProjection;
export type ComparatorFn = (a: any, b: any) => boolean;
export type DefaultProjectorFn<T> = (...args: any[]) => T;
export declare type Selector<T, V> = (state: T) => V;
export interface MemoizedSelector<State, Result, ProjectorFn = 
DefaultProjectorFn<Result>> extends Selector<State, Result> {
    release(): void;
    projector: ProjectorFn;
    setResult: (result?: Result) => void;
    clearResult: () => void;
}
export interface JerryState {
    name: string,
    age: number
}
let jerryProjector = (data: string) => data.length;
let jerryOriginFn = (data: JerryState) => data.name.length;
let jerrySelector: MemoizedSelector<JerryState, number, DefaultProjectorFn<number>>;
let oExtended = {
    release: () => {},
    projector: jerryProjector,
    setResult: (data: number) => {},
    clearResult: () => {}
};
jerrySelector = Object.assign(jerryOriginFn, oExtended);
console.log('Ethan', jerrySelector({ name: 'Jerry', age: 31}));
相关文章
|
存储 API 网络架构
Angular Ngrx Store 应用程序状态的一些典型例子
Angular Ngrx Store 应用程序状态的一些典型例子
|
Java API 调度
Angular Ngrx Store Effect 和 Action 的交互流程
Angular Ngrx Store Effect 和 Action 的交互流程
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
|
2月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
33 0
|
11月前
|
JavaScript UED SEO
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
|
存储 JavaScript 前端开发
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
|
Web App开发 存储 JavaScript
什么是 Angular Ngrx Store 里的 Meta-Reducer
什么是 Angular Ngrx Store 里的 Meta-Reducer
什么是 Angular Ngrx Store 里的 Meta-Reducer
|
前端开发 JavaScript
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
|
JavaScript 前端开发 调度
Angular Ngrx 里 Store 和 State 的关系
Angular Ngrx 里 Store 和 State 的关系
|
SQL 数据库
Angular Ngrx store 里的 Selector 介绍
Angular Ngrx store 里的 Selector 介绍
下一篇
无影云桌面