JSON 字符串转 TypeScript 接口：类型转换的实用指南

本文旨在解决将 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 函数的示例：

JSON.NET 简单的使用 中文WORD版

本文档主要讲述的是JSON.NET 简单的使用；JSON.NET使用来将.NET中的对象转换为JSON字符串（序列化），或者将JSON字符串转换为.NET中已有类型的对象（反序列化？）。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

0

查看详情

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 接口：类型转换的实用指南的详细内容，更多请关注php中文网其它相关文章！