键入 Object.fromEntries(new FormData(form))

Question

TypeScript 新手，在使用Object.fromEntries. 我正在尝试削减形式并将其价值转化为其他东西。例如，给定所有数据都是字符串的同构形状，以下工作：

// 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]>,
  )
}

如何将从上面返回的值转换为字符串以外的值？例如：

// 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]>,
  )
}

我的感觉是我可以用泛型和接口以某种方式修复它，但我不知道如何继续。如果有人可以 ELI5 我将不胜感激。

编辑：我的tsconfig.json：

// 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]>,
  )
}

EDIT2：更好地解释期望的结果。

Answer 1

在你的 TS 配置中添加“dom.iterable” lib：

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

现在 TS 知道 DOM 元素可以返回.entries()迭代器，您不再需要显式键入它：

Object.fromEntries(new FormData(form))

由于您使用的是 HTML 表单，因此除了字符串和 blob 之外您不会得到任何内容。如果您想将某些字符串转换为数字，转换将无济于事。只需迭代条目，并转换符合特定条件的值 - 例如特定键，或者如果将它们转换为数字不会产生NaN. 例如（TS游乐场）：

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