I've implemented a hook using useState and the delete method to effectively manage my form values.
const [values, setValues] = useState<tAllValues>({});
The values stored include:
{
name: 'Andrew',
age: 34,
avatar: [{
name: 'avatar.png',
size: 45234,
...
}]
}
These values can originate from various forms, hence they are assigned the tAllValues type which is a union of all form types.
type tForm1 = { name: string; age: number; };
type tForm2 = { avatar: File };
type tAllValues = tForm1 | tForm2;
A delete method is necessary for removing files. Files are standard objects within the values, and here's how the deletion process works:
const deleteFile = (fileId: string, fieldName: KeysOfUnion<tAllValues>) => {
const fieldValue = values[fieldName];
const filteredFiles = fieldValue.filter((value) => value.id !== fileId);
setValues({ ...values, [fieldName]: filteredFiles });
};
The fieldName parameter is specified as KeysOfUnion because it must be one of the keys from tAllValues, which leads to an issue.
export type KeysOfUnion<T> = T extends any ? keyof T : never;
Even though fieldName should be 'name' or 'age' or 'avatar', TypeScript shows an error:
Element implicitly has an 'any' type because expression of type '"name" | "age" | "avatar"' can't be used to index type 'tAllValues'.Property 'name' does not exist on type 'tAllValues'.ts(7053)
This error occurs possibly due to the absence of 'name' in tForm2 type but present in tForm1 type.
Is there a solution in TypeScript to address this issue?