TypeScript中为嵌套JSON动态声明类型并适配React自定义钩子

1. 基础类型推导 #

假设你的动态JSON文件（比如data.json）结构是单层嵌套：

{
  "key1": { "key1_1": "value1", "key1_2": 2 },
  "key2": { "key2_1": true, "key2_2": ["a", "b"] }
}

先导入JSON并通过typeof自动推导基础类型，再提取关键类型：

import data from './data.json';

// 整个JSON数据的类型
type RawData = typeof data;
// 顶层key的联合类型（比如"key1" | "key2"）
type TopLevelKey = keyof RawData;
// 对应顶层key的嵌套对象类型
type NestedData<K extends TopLevelKey> = RawData[K];

2. 实现带类型提示的useData钩子 #

利用泛型约束确保传入的key合法，同时让返回值拥有精确的嵌套类型：

import { useMemo } from 'react';

function useData<K extends TopLevelKey>(key: K): NestedData<K> {
  // 用useMemo缓存结果，避免不必要的重渲染
  return useMemo(() => data[key], [key]);
}

3. 类型安全的使用示例 #

无论是调用钩子还是直接访问原始JSON，都能获得完整的类型提示和类型校验：

// 使用钩子获取嵌套对象，自动提示key1下的属性
const key1Data = useData('key1');
console.log(key1Data.key1_1); // 正常访问，有类型提示
// key1Data.key2_1; // TypeScript会报错，禁止访问不存在的属性

// 直接访问原始JSON也保持类型安全
console.log(data.key2.key2_2); // 合法访问
// data.key3.key3_1; // 报错，顶层key不存在

核心逻辑说明 #

• 借助typeof data自动推导类型，无需手动编写嵌套对象的结构，适配动态JSON的变化
• 泛型K extends TopLevelKey限制传入的key必须是顶层存在的键，避免无效参数
• 索引类型RawData[K]精准定位对应顶层key的嵌套对象类型，确保返回值的类型提示准确

内容的提问来源于stack exchange，提问作者user12499410