typescript - 输入 Object.fromEntries(new FormData(form))

Question

这里是 TypeScript 新手，Object.fromEntries 有问题。我正在尝试削减形式并将其值(value)转换到其他东西上。例如，给定所有数据都是字符串的同质形状，下面的工作:

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

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

编辑:我的 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:更好地解释期望的结果。

Answer 1

在您的 TS 配置中，将“dom.iterable”添加到 lib:

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

现在 TS 知道 DOM 元素可以返回一个 .entries() 迭代器，你不需要再显式地输入它了:

Object.fromEntries(new FormData(form))

由于您使用的是 HTML 表单，因此您只会得到字符串和 blob。如果您想将某些字符串转换为数字，转换对您没有帮助。只需迭代条目，并转换符合特定条件的值 - 例如特定键，或者如果将它们转换为数字不会产生 NaN。例如 ( 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)