本文旨在解决将 JSON 字符串数据转换为 TypeScript 接口数据类型时，如何进行有效的类型转换，特别是将字符串转换为数字类型。我们将探讨使用 JSON.parse 的 reviver 函数进行转换的替代方案，并提供使用 map 函数进行类型转换的示例代码，以及最佳实践建议。
类型转换方法：map 函数
虽然可以使用 JSON.parse 的 reviver 函数进行类型转换，但更清晰、更易于维护的方法是使用 map 函数。这种方法允许您显式地控制每个字段的转换过程，并能更好地处理错误。
以下是一个示例，展示了如何使用 map 函数将包含字符串类型数字的 JSON 数组转换为 TypeScript 接口数组，并进行类型转换：
type Card = { sub_type: number; year: number; peak: string;}type SerializedCard = { sub_type: string; year: string; peak: string;}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;}async function getCards(): Promise<Array> { // 模拟从后端获取的 JSON 数据 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));
代码解释：
定义接口： 首先定义了 Card 和 SerializedCard 两个 TypeScript 接口，分别表示转换后的目标类型和原始的 JSON 数据类型。stringToNumberExn 函数： 该函数负责将字符串转换为数字。它使用 Number.parseInt 进行转换，并进行错误处理，如果字符串无法转换为数字，则抛出异常。getCards 函数： 该函数模拟从后端获取 JSON 数据，并使用 map 函数对数据进行转换。对于每个 SerializedCard 对象，创建一个新的 Card 对象，并将 sub_type 和 year 字段通过 stringToNumberExn 函数转换为数字类型。peak 字段： peak 字段保持不变，因为它已经是字符串类型。错误处理： stringToNumberExn 函数中的错误处理确保了在遇到无法转换为数字的字符串时，能够及时发现并处理错误。
使用 JSON.parse 的 reviver 函数 (不推荐)
虽然 map 是更推荐的方法，但为了完整性，这里也提供使用 JSON.parse 的 reviver 函数的示例：
type Card = { sub_type: number; year: number; peak: string;}const jsonString = `[{"sub_type": "0", "year": "2023", "peak": "N"}, {"sub_type": "1", "year": "2024", "peak": "Y"}]`;const cards: Card[] = JSON.parse(jsonString, (key, value) => { if (typeof value === 'string' && !isNaN(Number(value))) { return Number(value); } return value;});console.log(cards);
代码解释：
JSON.parse 的第二个参数是一个 reviver 函数，它会在解析过程中对每个键值对调用。在 reviver 函数中，我们检查值是否为字符串，并且是否可以转换为数字。如果是，则将其转换为数字。否则，保持原值不变。
注意： 这种方法可能会导致一些问题，例如：
难以区分哪些字符串应该转换为数字，哪些不应该。错误处理比较困难。
总结与最佳实践
优先使用 map 函数进行类型转换。 这种方法更清晰、更易于维护，并且可以更好地控制错误处理。定义明确的 TypeScript 接口。 这有助于确保类型安全，并提高代码的可读性。编写专门的类型转换函数。 像 stringToNumberExn 这样的函数可以提高代码的重用性，并使类型转换过程更加清晰。进行适当的错误处理。 确保能够处理无法转换为数字的字符串，并向用户提供有意义的错误信息。避免不必要的 JSON.stringify 和 JSON.parse 操作。 如果您已经有 JavaScript 对象，则无需将其转换为 JSON 字符串再解析回来。这会降低性能，并可能引入错误。
通过遵循这些最佳实践，您可以更有效地将 JSON 数据转换为 TypeScript 接口，并编写更健壮、更易于维护的代码。
以上就是JSON 字符串转 TypeScript 接口：类型转换的实用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523806.html
微信扫一扫 
支付宝扫一扫 
