本文介绍了如何在 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> { // 模拟从后端获取数据 const res: Array = [ { 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 接口的要求。这种方法避免了不必要的序列化和反序列化，提高了代码的效率和可读性。同时，通过添加适当的错误处理和数据验证，可以确保代码的健壮性和可靠性。
以上就是将 JSON 数据类型解析为 TypeScript 接口数据类型的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523862.html
微信扫一扫 
支付宝扫一扫 
