Currently, I am working on a Vue 3 project with TypeScript, transitioning from JavaScript, and keeping it simple without using complex plugins for Vuex store. I have a mutation that dynamically sets various properties of an order object to eliminate the need for writing a mutation for each property. In JavaScript, the mutation looks like this:
setMetaProp(state, { propName, value }) {
state.order[propName] = value;
}
As I continue learning and converting to TypeScript, I have created a function that achieves the same functionality with type safety:
export interface PropNameKeyValue<KeyType, ValueType> {
propName: KeyType;
value: ValueType;
}
export declare function setMeta<Key extends keyof Order>(payload: PropNameKeyValue<Key, Order[Key]>): void;
// The type of 'is_quote' is boolean in the 'Order' type declaration
setMeta({ propName: 'is_quote', value: '123' });
// If I attempt to set 'is_quote' to something other than a boolean here,
// TypeScript catches the issue and prompts that it should be a boolean
My question now is, am I expecting too much in terms of TypeScript and Vuex integration?