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

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

获取数据并进行转换

接下来，我们需要获取 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 或其他优化技术来提高转换性能。

总结

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