本文旨在解决将 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> {
// 模拟从后端获取的 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 函数的示例：
JSON.NET 简单的使用 中文WORD版
下载
本文档主要讲述的是JSON.NET 简单的使用；JSON.NET使用来将.NET中的对象转换为JSON字符串（序列化），或者将JSON字符串转换为.NET中已有类型的对象（反序列化？）。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
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 接口，并编写更健壮、更易于维护的代码。
