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

TypeScript 中 JSON 数据类型转换为 Interface 数据类型

聖光之護

发布： 2025-09-27 17:37:34

原创

504人浏览过

typescript 中 json 数据类型转换为 interface 数据类型

第一段引用上面的摘要：

本文介绍了如何在 TypeScript 中将 JSON 数据中的字符串类型转换为数字类型，以满足 TypeScript Interface 的类型定义。通过自定义转换函数和 map 方法，可以有效地处理从后端获取的 JSON 数据，并将其转换为符合类型定义的格式，确保类型安全。

在 TypeScript 项目中，经常会遇到从后端 API 获取 JSON 数据的情况。这些数据可能与前端定义的 TypeScript Interface 的类型不完全匹配，例如，后端返回的数字类型数据可能是字符串格式。这时，就需要进行数据类型转换，以确保类型安全和代码的健壮性。

使用自定义转换函数

一种常见的方法是定义一个自定义的转换函数，将字符串转换为数字。这个函数可以处理转换失败的情况，并抛出异常或返回默认值。

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;
}

登录后复制

这个 stringToNumberExn 函数接收一个字符串作为参数，尝试将其转换为数字。如果转换失败（例如，字符串不是一个有效的数字），则抛出一个错误。

使用 map 方法进行批量转换

假设我们有一个包含字符串类型属性的 Interface，例如：

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

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

145

查看详情

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

登录后复制

我们希望将其转换为具有数字类型属性的 Interface：

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

登录后复制

可以使用 map 方法结合自定义转换函数来实现批量转换：

async function getCards(): Promise<Array<t_card>> {
  // 模拟从后端获取数据
  const res: Array<t_serialized_card> = 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 函数首先从后端获取 t_serialized_card 类型的数组。然后，使用 map 方法遍历数组中的每个元素，并使用 stringToNumberExn 函数将 sub_type 和 year 属性转换为数字类型。最终返回一个 t_card 类型的数组。