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)，如果是，则抛出一个包含错误信息的异常。

魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

获取数据并进行转换

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

async function getCards(): Promise> {
  // format as returned from backend
  const res: Array = 
    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 或其他优化技术来提高转换性能。

总结

通过定义 TypeScript 接口、实现字符串到数值的转换函数，并在数据获取后使用 map 方法进行转换，我们可以安全有效地将 JSON 数据中的字符串类型数值转换为 TypeScript 接口中定义的数值类型。这种方法可以提高代码的健壮性和可维护性，并避免因数据类型不一致而导致的错误。