JSON 数据类型转换为 TypeScript 接口数据类型-js教程-PHP中文网

JSON 数据类型转换为 TypeScript 接口数据类型

心靈之曲

发布： 2025-09-27 16:42:01

原创

187人浏览过

json 数据类型转换为 typescript 接口数据类型

本文介绍了如何将 JSON 数据中的字符串类型数值转换为 TypeScript 接口中定义的数值类型。通过 stringToNumberExn 函数进行字符串到数字的转换，并在数据获取后使用 map 方法将 JSON 数据转换为符合 TypeScript 接口定义的格式，从而确保数据类型的一致性和代码的健壮性。

在 TypeScript 开发中，我们经常需要处理从后端接口获取的 JSON 数据。然而，有时后端返回的数据类型与前端 TypeScript 接口定义的类型不一致，比如数值类型的字段被表示为字符串。本文将介绍如何安全有效地将 JSON 数据中的字符串类型数值转换为 TypeScript 接口中定义的数值类型。

定义 TypeScript 接口

首先，我们需要定义 TypeScript 接口来描述数据的结构。假设我们有以下两个接口：t_card 定义了期望的数值类型，而 t_serialized_card 定义了从后端接收到的字符串类型。

type t_card = {
  sub_type: number
  year: number
  peak: string
}

type t_serialized_card = {
  sub_type: string
  year: string
  peak: string
}

登录后复制

实现字符串到数值的转换函数

为了将字符串转换为数值，我们可以创建一个名为 stringToNumberExn 的函数。该函数接收一个字符串作为参数，尝试将其转换为数值，并在转换失败时抛出错误。

function stringToNumberExn(s: string): number {
  const n = Number.parseInt(s)
  if (Number.isNaN(n))
    throw Error(`stringToNumberExn: ${s} is not a number`)
  return n
}

登录后复制

这个函数使用了 Number.parseInt 方法将字符串转换为整数。Number.isNaN 用于检查转换结果是否为 NaN (Not a Number)，如果是，则抛出一个包含错误信息的异常。

机械轴承电子产品类网站源码

织梦最新内核开发的模板，518源码论坛亲自开发，转载请备注出处。该模板属于企业通用类、机械轴承、分条机类等设备类企业都可使用，这款模板使用范围极广，不仅仅局限于一类型的企业，你只需要把图片和产品内容换成你的，颜色都可以修改，改完让你耳目一新的感觉！自带最新的手机移动端，同一个后台，数据即时同步，简单适用！

145

查看详情

获取数据并进行转换

接下来，我们需要获取 JSON 数据，并使用 map 方法将每个 t_serialized_card 对象转换为 t_card 对象。

async function getCards(): Promise<Array<t_card>> {
  // format as returned from backend
  const res: Array<t_serialized_card> = 
    await fetch("/path/to/cards").then(r => r.json())

  // map to desired format 
  return res.map(card => ({
    sub_type: stringToNumberExn(card.sub_type),
    year: stringToNumberExn(card.year),
    peak: card.peak
  }))
}

登录后复制

在这个例子中，fetch 函数用于从 /path/to/cards 获取 JSON 数据。then(r => r.json()) 将响应转换为 JSON 对象。res.map 方法遍历 JSON 数组，并使用 stringToNumberExn 函数将 sub_type 和 year 字段转换为数值类型。

注意事项

错误处理： stringToNumberExn 函数在转换失败时会抛出错误。在实际应用中，应该使用 try...catch 语句来捕获这些错误，并进行适当的处理，例如记录日志或向用户显示错误信息。
类型安全： 确保后端返回的数据类型与 t_serialized_card 接口定义的一致。如果数据类型不一致，可能会导致转换失败或运行时错误。
性能： 如果需要处理大量数据，可以考虑使用 Web Workers 或其他优化技术来提高转换性能。