本文旨在解决将 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<Card>> {   // 模拟从后端获取的 JSON 数据   const res: Array<SerializedCard> = [     { 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));

代码解释：

1. 定义接口： 首先定义了 Card 和 SerializedCard 两个 TypeScript 接口，分别表示转换后的目标类型和原始的 JSON 数据类型。
2. stringToNumberExn 函数： 该函数负责将字符串转换为数字。它使用 Number.parseInt 进行转换，并进行错误处理，如果字符串无法转换为数字，则抛出异常。
3. getCards 函数： 该函数模拟从后端获取 JSON 数据，并使用 map 函数对数据进行转换。对于每个 SerializedCard 对象，创建一个新的 Card 对象，并将 sub_type 和 year 字段通过 stringToNumberExn 函数转换为数字类型。
4. peak 字段： peak 字段保持不变，因为它已经是字符串类型。
5. 错误处理： stringToNumberExn 函数中的错误处理确保了在遇到无法转换为数字的字符串时，能够及时发现并处理错误。

使用 JSON.parse 的 reviver 函数 (不推荐)

虽然 map 是更推荐的方法，但为了完整性，这里也提供使用 JSON.parse 的 reviver 函数的示例：

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

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 接口，并编写更健壮、更易于维护的代码。