将 JSON 数据类型解析为 TypeScript 接口数据类型-js教程-PHP中文网

将 JSON 数据类型解析为 TypeScript 接口数据类型

心靈之曲

发布： 2025-09-27 16:57:13

原创

751人浏览过

将 json 数据类型解析为 typescript 接口数据类型

本文介绍了如何在 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 数组。

自定义转换函数

易语言学习手册十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

查看详情

为了安全地将字符串转换为数字，我们可以创建一个自定义的转换函数：

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<t_card>> {
  // 模拟从后端获取数据
  const res: Array<t_serialized_card> = [
    { 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 接口数据类型的详细内容，更多请关注php中文网其它相关文章！