Question

36

Typing Object.fromEntries(new FormData(form))

rated 0 times [ 43] [ 7] / answers: 1 / hits: 7622 / 2 Years ago, mon, march 7, 2022, 12:00:00

TypeScript newbie here, having problems with Object.fromEntries. I'm trying to pares form and cast its values to something else. For example, given homogeneous shape of all data being strings, below works:



// example form content:

// {

//    foo: 'bar',

//    bar: 'biz'

//  }

//  return values

// {

//    foo: 'bar',

//    bar: 'biz'

//  }



export const getFormData = (form: HTMLFormElement) => {

  return Object.fromEntries<string>(

    new FormData(form) as Iterable<[PropertyKey, string]>,

  )

}

How I can cast values returned from the above to values others than strings? For example:



// example form content:

// {

//    foo: '1',

//    bar: 'biz',

//    biz: 'false'

//  }

//  desired return values

// {

//    foo: 1,

//    bar: 'biz',

//    biz: false

//  }



export const getFormData = (form: HTMLFormElement) => {

  return Object.fromEntries<string>(

    new FormData(form) as Iterable<[PropertyKey, string]>,

  )

}

My feeling is that I can somehow fix it with generics and interfaces but I'm at a loss how to proceed. If someone could ELI5 I would be grateful.

EDIT: my tsconfig.json:

{

    "compilerOptions": {

        "moduleResolution": "node",

        "module": "es2020",

        "lib": ["esnext", "dom", "dom.iterable"],

        "target": "es2020",

        "downlevelIteration": true,

        "importsNotUsedAsValues": "error",

        "preserveValueImports": true,

        "isolatedModules": true,

        "resolveJsonModule": true,

        "sourceMap": true,

        "esModuleInterop": true,

        "skipLibCheck": true,

        "forceConsistentCasingInFileNames": true,

        "baseUrl": ".",

        "allowJs": true,

        "checkJs": true,

    }

}

EDIT2: Better explanation of the desired outcome.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adriannemyiag

Add To Favorites

Follow

Total Points: 504

Total Questions: 105

Total Answers: 99

Location: Ecuador

Member since Thu, Apr 22, 2021

3 Years ago

adriannemyiag questions

1 Testing whether you reach an array's last item when using reduce() in Javascript

Mon, Oct 5, 20, 00:00, 4 Years ago

1 How to add elements to array on click in react?

Tue, May 12, 20, 00:00, 4 Years ago

1 How to add a seek slider to html5 video player?

Sun, May 3, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: is not defined at HTMLAnchorElement.onclick

Wed, Jun 26, 19, 00:00, 5 Years ago

1 Use / deep / bug in Vue

Fri, Apr 26, 19, 00:00, 5 Years ago

View All

answered 2 Years ago dillionsalvadorg · Accepted Answer

In your TS config add "dom.iterable" to lib:

"lib": [

  "es2019",

  "dom",

  "dom.iterable"

],

Now that TS knows that the DOM element can return an .entries() iterator, you don't need to type it explicitly anymore:

Object.fromEntries(new FormData(form))

Since you're using an HTML form, you won't get anything but strings and blobs. If you want to convert some of the strings to numbers, casting won't help you. Just iterate the entries, and convert values that fit a certain criteria - for example a certain key, or if converting them to numbers doesn't produce NaN. For example (TS Playground):

const formData = new FormData();



formData.append('name', 'max');

formData.append('age', '123456');



const result = Object.fromEntries([...formData].map(([key, value]) => [

  key,

  key === 'age' ? +value : value

]))



console.log(result)