Looking to create a TypeScript function with 2 parameters,
- a list of fields containing a
nameand optionaltype - FormData, then return an object with field name as key and field value as value
How it should operate:
const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('age', '25');
const fields = { name: {}, age: { type: 'number' } };
const data = extractFormValues(fields, formData);
// {age: 25, name: "John Doe;"}
// types being {age: number, name: string}
I managed to get it working by using an object instead of an array
// const fields = [{ name: 'name' }, { name: 'age', type: 'number' }];
const fields = { name: {}, age: { type: 'number' } };
Presenting the current solution utilizing an object rather than an array
type IField = {
name: string;
type?: string;
};
type IFields = Record<string, IField>;
const extractFormValues = <TFields extends IFields>(fields: TFields, formData: FormData) => {
const keys = Object.keys(fields);
const data = {} as {
[Key in keyof TFields]: TFields[Key]['type'] extends 'number' ? number : string;
};
for (const key of keys) {
const value = formData.get(key) as string;
if (fields[key]?.type === 'number') data[key] = Number(value);
else data[key] = value;
}
return data;
};
const fields = { name: { name: 'name' }, age: { name: 'age', type: 'number' } };
const formData = new FormData();
formData.append('name', 'JohnDoe');
formData.append('age', '25');
const data = extractFormValues(fields, formData);
Desiring the functionality when passing an array like this.
const fields = [{ name: 'name' }, { name: 'age', type: 'number' }]
This is how I would like it, while maintaining type safety
type IField = {
name: string;
type?: string;
};
type IFields = IField[];
const extractFormValues = (fields, formData: FormData) => {
const data = {};
for (const field of fields) {
const value = formData.get(field.name) as string;
if (field.type === 'number') data[field.name] = Number(value);
else data[field.name] = value;
}
return data;
};
To execute it, use the following:
const fields = [{ name: 'name' }, { name: 'age', type: 'number' }];
const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('age', '25');
const data = extractFormValues(fields, formData); // {name:'John Doe',age:25}
// ^? needs to be {name:string,age:number}