How can I pass interface as a type to generic? Generic will expand in the future. Maybe that code absolutely wrong for my problem?
This code will be duplicated in multiple files. 2 lines(without interface) vs 12. I try to pass interface but I see an error.
Expected 5 arguments, but passed 1.
helpers.ts
export const httpRequestsActions = <
TAllData,
TSingleData,
TCreate,
TEdit,
TDelete
>() => {
const getAllDataAction: IActionFn<TAllData> = (payload) => {
return "data";
};
const getSingleDataAction: IActionFn<TSingleData> = (payload) => {
return "data";
};
const createDataAction: IActionFn<TCreate> = (payload, params) => {
return "data";
};
const editDataAction: IActionFn<TEdit> = (payload, params) => {
return "data";
};
const deleteDataAction: IActionFn<TDelete> = (payload) => {
return "data";
};
return {
getAllDataAction,
getSingleDataAction,
createDataAction,
editDataAction,
deleteDataAction,
};
};
==Current code==
actions.ts, sagas.ts
import {
ICreateEmployee,
IEditEmployee,
IGetEmployees,
} from "interfaces/employees";
export const employeesActions = httpRequestsActions<
IGetEmployees,
{ id: string },
ICreateEmployee,
IEditEmployee,
{ id: string }
>(EMPLOYEES);
==I want==
inteface.ts
export interface ITypeEmployees {
TAllData: IGetEmployees;
TSingle: { id: string };
TCreate: ICreateEmployee;
TEdit: IEditEmployee;
TDelete: { id: string };
}
actions.ts, sagas.ts
import { ITypeEmployees } from "interfaces/employees";
export const employeesActions = httpRequestsActions<ITypeEmployees>(EMPLOYEES);
To use a single type parameter such as in
export const employeesActions = httpRequestsActions<ITypeEmployees>(EMPLOYEES);
you will need to declare a function with only one type parameter matching that interface:
export const httpRequestsActions = <T extends {
TAllData: unknown;
TSingleData: unknown;
TCreate: unknown;
TEdit: unknown;
TDelete: unknown;
}>(): {
getAllDataAction: IActionFn<T["TAllData"]>;
getSingleDataAction: IActionFn<T["TSingleData"]>;
createDataAction: IActionFn<T["TCreate"]>;
editDataAction: IActionFn<T["TEdit"]>;
deleteDataAction: IActionFn<T["TDelete"]>;
} => ({
getAllDataAction(payload) {
return "data";
},
getSingleDataAction(payload) {
return "data";
},
createDataAction(payload, params) {
return "data";
},
editDataAction(payload, params) {
return "data";
},
deleteDataAction(payload) {
return "data";
},
});
So you have your types separated like so
export const httpRequestsActions = <TAllData, TSingleData, TCreate, TEdit, TDelete>() => {
// rest of your code
};
and you are calling it like so:
export const employeesActions = httpRequestsActions<ITypeEmployees>(EMPLOYEES)
Because you have these TAllData, TSingleData, TCreate, TEdit, TDelete separated by commas, httpRequestsActions expects 5 types to be passed in. You are only passing in one interface ITypeEmployees. Because I don't know what your end intention is, my suggestion based on what I can see would be to do this:
type TAllData = IGetEmployees;
interface TSingle { id: string };
type TCreate = ICreateEmployee;
type TEdit = IEditEmployee;
interface TDelete { id: string };
export const employeesActions = httpRequestsActions<TAllData, TSingleData, TCreate, TEdit, TDelete>(EMPLOYEES)