本文介绍了如何在 TypeScript 中将 JSON 数据中的字符串类型转换为数字类型，以匹配预定义的接口。重点讲解了避免不必要的 JSON 序列化和反序列化，并提供了一种使用 map 函数和自定义转换函数来高效处理数据类型转换的方法。通过示例代码，展示了如何安全地将字符串转换为数字，并处理转换失败的情况，最终得到符合 TypeScript 接口定义的类型化数据。
在 TypeScript 项目中，经常会遇到从后端 API 或 JSON 文件获取数据的情况。这些数据通常以字符串的形式存在，但我们的 TypeScript 接口可能期望某些字段是数字类型。直接使用 JSON.parse 可能会导致类型不匹配，因此需要一种有效的方法将字符串转换为数字，以满足 TypeScript 的类型安全要求。
避免不必要的序列化和反序列化
在原始问题中，尝试使用 JSON.stringify 后再使用 JSON.parse 的方法是多余的，并且效率低下。正确的做法是直接对解析后的 JSON 数据进行类型转换。
使用 map 函数进行类型转换
假设我们有以下 TypeScript 接口：
type t_card = {
sub_type: number
year: number
peak: string
}
type t_serialized_card = {
sub_type: string
year: string
peak: string
}其中 t_card 是我们期望的数据类型，而 t_serialized_card 是从 JSON 解析后得到的类型，其中 sub_type 和 year 都是字符串。
我们可以使用 map 函数将 t_serialized_card 数组转换为 t_card 数组。
自定义转换函数
为了安全地将字符串转换为数字，我们可以创建一个自定义的转换函数：
function stringToNumberExn(s: string): number {
const n = Number.parseInt(s);
if (Number.isNaN(n)) {
throw new Error(`stringToNumberExn: ${s} is not a number`);
}
return n;
}这个函数首先使用 Number.parseInt 将字符串转换为数字。如果转换失败（例如，字符串不是一个有效的数字），则抛出一个错误。这样可以确保我们不会得到 NaN 值，并且可以更好地处理错误情况。
示例代码
以下是一个完整的示例，展示了如何从 API 获取数据，并将其转换为所需的类型：
async function getCards(): Promise<Array<t_card>> {
// 模拟从后端获取数据
const res: Array<t_serialized_card> = [
{ sub_type: "0", year: "2023", peak: "N" },
{ sub_type: "1", year: "2024", peak: "Y" },
]; //await fetch("/path/to/cards").then(r => r.json());
// 使用 map 函数进行类型转换
return res.map(card => ({
sub_type: stringToNumberExn(card.sub_type),
year: stringToNumberExn(card.year),
peak: card.peak
}));
}
// 调用示例
getCards().then(cards => {
console.log(cards);
});注意事项
- 错误处理： 在实际应用中，需要更完善的错误处理机制。例如，可以使用 try...catch 块来捕获 stringToNumberExn 函数抛出的错误，并进行适当的处理（例如，记录错误日志或向用户显示错误消息）。
- 数据验证： 除了类型转换之外，还应该对数据进行验证，以确保其符合业务规则。例如，可以检查年份是否在有效范围内。
- 性能优化： 如果需要处理大量数据，可以考虑使用更高效的类型转换方法。例如，可以使用 parseInt 的第二个参数指定进制，以提高性能。
- 类型安全： 确保你的 TypeScript 配置启用了严格的类型检查，以便在编译时发现潜在的类型错误。
总结
通过使用 map 函数和自定义的类型转换函数，我们可以有效地将 JSON 数据中的字符串类型转换为数字类型，以满足 TypeScript 接口的要求。这种方法避免了不必要的序列化和反序列化，提高了代码的效率和可读性。同时，通过添加适当的错误处理和数据验证，可以确保代码的健壮性和可靠性。
