TypeScript 中 JSON 对象加载与导出代码示例

以下是针对初学者的 ​​TypeScript 中 JSON 对象加载与导出​​ 的详细讲解，结合代码示例和生活场景，帮你快速掌握核心操作：

---

一、为什么需要处理 JSON？

JSON（JavaScript Object Notation）是前后端数据交互的"通用语言"。在 TypeScript 中，我们经常需要：

• ​导出 JSON​：将 TypeScript 对象序列化为 JSON 字符串（如保存配置、生成 API 响应）。
• ​加载 JSON​：将 JSON 字符串反序列化为 TypeScript 对象（如读取配置、解析 API 响应）。

TypeScript 的优势是​​类型安全​ ​，因此处理 JSON 时需结合​​接口（Interface）​ ​或​​类型别名（Type Alias）​​定义数据结构，避免"脏数据"导致的错误。

---

二、核心概念：类型定义（接口/类型别名）

在处理 JSON 前，必须先定义数据的​​结构类型​​，这样 TypeScript 才能在编译期检查数据是否符合预期。

示例：定义用户信息的类型

// 用户信息的接口（描述 JSON 结构）
interface User {
  id: number;       // 用户 ID（数字）
  name: string;     // 用户名（字符串）
  age?: number;     // 年龄（可选，可能存在或不存在）
  email: string;    // 邮箱（字符串）
}

• interface User 定义了 JSON 对象的结构：必须包含 id（数字）、name（字符串）、email（字符串），age 可选（可能有或没有）。
• 后续处理 JSON 时，TypeScript 会根据这个接口检查数据是否合法（如 id 是否为数字）。

---

三、JSON 导出（TypeScript 对象 → JSON 字符串）

导出 JSON 是将 TypeScript 对象​​序列化​ ​为 JSON 字符串的过程，常用 JSON.stringify() 方法。

步骤 1：创建符合类型的 TypeScript 对象

// 创建一个符合 User 接口的对象
const user: User = {
  id: 1,
  name: "张三",
  email: "zhangsan@example.com",
  // age 可选，这里不填也可以
};

步骤 2：序列化为 JSON 字符串

使用 JSON.stringify() 将对象转为 JSON 字符串：

const userJson: string = JSON.stringify(user);
console.log(userJson); 
// 输出：{"id":1,"name":"张三","email":"zhangsan@example.com"}

步骤 3：（可选）写入文件（如保存配置）

若需将 JSON 字符串保存到本地文件（如 user.json），可使用 Node.js 的 fs 模块：

import * as fs from 'fs';

// 写入文件（异步方式）
fs.writeFile('user.json', userJson, 'utf-8', (err) => {
  if (err) {
    console.error('写入失败:', err);
  } else {
    console.log('JSON 文件保存成功！');
  }
});

---

四、JSON 加载（JSON 字符串 → TypeScript 对象）

加载 JSON 是将 JSON 字符串​​反序列化​ ​为 TypeScript 对象的过程，常用 JSON.parse() 方法。

步骤 1：读取 JSON 字符串（如从文件或 API 响应）

假设从文件 user.json 读取 JSON 字符串：

import * as fs from 'fs';

// 读取文件内容（异步方式）
fs.readFile('user.json', 'utf-8', (err, data) => {
  if (err) {
    console.error('读取失败:', err);
    return;
  }
  // data 是 JSON 字符串（如 '{"id":1,"name":"张三","email":"zhangsan@example.com"}'）
  parseUserJson(data);
});

步骤 2：反序列化为 TypeScript 对象

使用 JSON.parse() 解析字符串，并通过​​类型断言​​明确返回值类型：

function parseUserJson(jsonStr: string): User {
  // 解析 JSON 字符串，并断言为 User 类型
  const user: User = JSON.parse(jsonStr) as User;
  
  // 可选：校验数据是否符合预期（如 email 是否包含 @）
  if (!user.email.includes('@')) {
    throw new Error('邮箱格式错误');
  }
  
  return user;
}

步骤 3：（可选）处理可选字段

若 JSON 中缺少可选字段（如 age），TypeScript 不会报错，但需确保代码健壮性：

const loadedUser = parseUserJson(userJson);
console.log(loadedUser.age); // 输出：undefined（不会报错）

---

五、完整示例：配置文件加载与导出

假设我们需要一个配置文件 config.json，存储应用的 API 地址和主题模式，演示完整的加载与导出流程。

1. 定义配置类型（types.ts）

// 配置文件的类型定义
interface AppConfig {
  apiUrl: string;       // API 地址（必填）
  theme: 'light' | 'dark'; // 主题模式（只能是 light 或 dark）
  timeout?: number;     // 超时时间（可选，单位 ms）
}

2. 导出配置（生成 config.json）

// 导出配置的工具函数（`exportConfig.ts`）
import * as fs from 'fs';
import { AppConfig } from './types';

// 示例配置对象（符合 AppConfig 类型）
const config: AppConfig = {
  apiUrl: 'https://api.example.com',
  theme: 'dark',
  timeout: 5000
};

// 序列化为 JSON 字符串
const configJson: string = JSON.stringify(config, null, 2); // 第三个参数是缩进（美化格式）

// 写入文件
fs.writeFile('config.json', configJson, 'utf-8', (err) => {
  if (err) {
    console.error('配置文件保存失败:', err);
  } else {
    console.log('配置文件已保存：config.json');
  }
});

3. 加载配置（读取 config.json）

// 加载配置的工具函数（`loadConfig.ts`）
import * as fs from 'fs';
import { AppConfig } from './types';

// 读取并解析配置文件
function loadConfig(): AppConfig {
  try {
    // 同步读取文件（也可用异步方式）
    const jsonStr: string = fs.readFileSync('config.json', 'utf-8');
    
    // 解析并断言类型
    const config: AppConfig = JSON.parse(jsonStr) as AppConfig;
    
    // 校验必要字段（如 apiUrl 是否为空）
    if (!config.apiUrl) {
      throw new Error('apiUrl 不能为空');
    }
    
    return config;
  } catch (err) {
    console.error('加载配置失败:', err);
    throw err; // 抛出错误，让调用者处理
  }
}

// 使用配置
const appConfig = loadConfig();
console.log('当前主题:', appConfig.theme); // 输出：dark
console.log('API 地址:', appConfig.apiUrl); // 输出：https://api.example.com

---

六、关键注意事项

1. 类型安全是核心

• ​必须定义接口​ ：通过 interface 或 type 明确 JSON 结构，TypeScript 会在编译期检查类型错误（如 age 写成字符串会报错）。
• ​避免 any 类型​ ：不要用 any 绕过类型检查，否则失去 TypeScript 的意义。

2. 处理可选字段

• 可选字段（如 age?）在 JSON 中可能不存在，解析后值为 undefined，需在代码中做容错处理（如 user.age?.toString()）。

3. 错误处理

• ​解析失败​ ：JSON.parse() 可能因格式错误（如缺少引号）抛出异常，需用 try/catch 捕获。
• ​数据校验​：即使类型匹配，也需校验业务逻辑（如邮箱格式、数值范围）。

4. 格式化与压缩

• JSON.stringify(obj, null, 2) 中的第三个参数 2 表示缩进 2 空格，生成易读的 JSON 文件。
• 若需压缩 JSON（去除空格），可省略第三个参数：JSON.stringify(obj)。

---

七、总结

TypeScript 处理 JSON 的核心流程：

1. ​定义类型​ ：用 interface 描述 JSON 结构。
2. ​导出 JSON​ ：用 JSON.stringify() 将对象转为字符串，可选写入文件。
3. ​加载 JSON​ ：用 JSON.parse() 将字符串转为对象，通过类型断言明确类型，校验数据合法性。

通过类型定义和严格的错误处理，TypeScript 能有效避免 JSON 处理中的"脏数据"问题，让代码更健壮、易维护。

现在，你可以尝试创建自己的 JSON 文件，用 TypeScript 读取和导出数据啦！ 😊