Angular 11中number数组发起POST请求时为何变为字符串数组？

核心原因 #

• TypeScript 的类型注解仅作用于编译阶段，代码转成 JavaScript 后所有类型标记都会被完全擦除，运行时不会基于类型声明自动做任何类型转换。
• 你从dtInstance.row(item).data()[0]取出的原始值本身就是字符串类型。由于第三方组件的返回值没有严格的类型约束，这个值会被TypeScript推断为any，而any类型可以无报错地赋值给任意类型，因此不会在编译阶段提示你类型不匹配，但运行时这个数组里实际存储的全是字符串。
• Angular 的HttpClient发送 POST 请求时，只会对传入的对象做原生 JSON 序列化，不会对字段做额外的类型转换，因此数组里的字符串会被原样序列化成"3"、"4"的格式。

修复方法 #

在取值推入数组的环节，显式将原始值转换为数字类型：

let list: number[] = [];
dtInstance.rows({selected: true}).every((item) => {
  const rawId = dtInstance.row(item).data()[0];
  // 显式转为数字类型后再推入数组
  list.push(Number(rawId));
});

如果需要兼容整数解析场景，也可以使用parseInt(rawId, 10)做转换。若存在原始值为非数字的异常情况，可以增加一层合法性校验：

const rawId = dtInstance.row(item).data()[0];
const numericId = Number(rawId);
if (!Number.isNaN(numericId)) {
  list.push(numericId);
}

经过这样处理后，数组内存储的就是真实的数字类型值，最终序列化生成的请求体就会符合{dossiers: [3,4], date: "2022-01-01"}的预期格式。

内容的提问来源于stack exchange，提问作者J. Sabatier