Exploring the implementation of state management (pinia) within a single-page application is my current task. We are utilizing typescript, and I am inquiring about whether there exists a method to define a state based on an interface without needing to retype every individual property within the state. Essentially, instructing the state to align with an interface and automatically initialize with the correct structure.
I have managed to establish a state that adheres to a specific interface structure by using defineStore
Here's a hypothetical example:
interface ICustomer {
id: number;
name: string;
// Up to 100 more properties and sometimes nested objects based on other interfaces
}
export const useCustomersStore = defineStore<string, ICustomer>('customers', {
state: () => ({
...ICustomer,
}),
...
Our interfaces tend to be extensive (containing anywhere from 50-100 properties each), and having to retype each property within the state declaration can become quite verbose. The primary challenge seems to be that the state requires a default value for initialization, but repeatedly typing out all properties can lead to clutter. Furthermore, this approach may not be very future-proof as we would need to remember to update the state properties whenever changes are made to the interfaces. Our APIs consistently mirror the exact structure of these interfaces; hence, we also specify the interface for each axios call.
Thank you!