In my current project, I am utilizing Angular v16 and ngxs v18.0 simultaneously. The project consists of multiple grids that require a similar set of actions. To streamline this process, we attempted to create a factory function that would generate action class definitions with unique type properties. The function simply outputs an anonymous object with a specified interface, where each object property represents a class definition. Although the code functions correctly, I am struggling to make typescript recognize that the class definitions are properties of the object rather than a globally scoped namespace.
Below is the code snippet for the factory module:
export interface GridActions {
Initialize: ActionDef,
Fetch: ActionDef,
FetchSuccess: ActionDef,
FetchFailed: ActionDef,
UpdatePagingParams: ActionDef,
ToggleRowExpanded: ActionDef,
ExpandRow: ActionDef,
CollapseRow: ActionDef,
ToggleExpandAll: ActionDef,
UpdateFilter: ActionDef,
UpdateSort: ActionDef
}
export class GridActionFactory {
cache: {[key:string]:GridActions} = {};
private static instance: GridActionFactory;
static getActions(gridName: string): GridActions {
// Code implementation here
}
}
Furthermore, there is an ExampleActions.ts file, which includes the following code:
export const ExampleActions = {
ActionableGrid: GridActionFactory.getActions('actionable-grid'),
PendingGrid: GridActionFactory.getActions('pending-grid'),
HistoricalGrid: GridActionFactory.getActions('historical-grid')
}
Subsequently, the usage of this code is as follows:
import { ExampleActions } from './example.actions';
const AtgActions = ExampleActions.ActionableGrid;
const HtgActions = ExampleActions.HistoricalGrid;
export const EXAMPLE_STATE_TOKEN = new StateToken<ExampleStateModel>('example');
@State({
name: EXAMPLE_STATE_TOKEN,
defaults: exampleStateModelDefaults,
})
@Injectable()
export class ExampleState {
// Code implementation here
}