TypeScript嵌套JSON条件类型 模型参数遍历类型定义问题

不需要调整现有业务实现逻辑，补全对应类型定义、调整遍历写法即可通过类型校验，具体操作如下：

• 首先定义通用的超参数结构类型，匹配default、options两个属性的固定结构：

// 单条超参数配置的类型，default、options的具体值类型可以根据业务实际场景调整
type HyperParamConfig = {
  default: string | number | boolean;
  options: Array<string | number | boolean> | null;
}

• 给网络返回的MODEL对象定义整体结构类型，因为MODEL是接口动态返回的，用Record类型做映射即可：

// MODEL结构：一级键为模型名称，二级键为对应模型的超参数名，值为超参数配置
type ModelConfigMap = Record<string, Record<string, HyperParamConfig>>;

// 拿到接口返回的MODEL后做类型断言，需要自行保障接口返回结构和定义一致，避免运行时错误
const MODEL = await fetchModelConfigFromApi() as ModelConfigMap;

// 原有定义的模型名联合类型可以直接保留
type InputProps = keyof typeof MODEL;

• 解决循环遍历的类型报错：访问model[parameter]["default"]时报错，核心原因是TypeScript默认将for...in遍历出的键推导为string类型，无法确认该键一定存在于当前模型的配置对象中，因此禁止访问后续属性。两种处理方式选其一即可：
  1. 推荐写法：用Object.entries()替代for...in遍历，TS对该API的返回值推导更准确，不需要额外写类型断言：

  const InputBlock = ({ modelName }: { modelName: InputProps }) => {
    const currentModel = MODEL[modelName];
    
    return (
      <div className="input-block">
        {Object.entries(currentModel).map(([paramName, paramConfig]) => {
          // 此处paramConfig自动推导为HyperParamConfig类型，可直接访问default、options属性
          return (
            <div key={paramName} className="param-item">
              <span className="param-name">{paramName}</span>
              <input placeholder={String(paramConfig.default)} />
              {paramConfig.options && (
                <datalist>
                  {paramConfig.options.map(opt => <option value={opt} key={String(opt)} />)}
                </datalist>
              )}
            </div>
          )
        })}
      </div>
    )
  }
  

  2. 如果要保留for...in的写法，只需要给遍历出的parameter变量加类型收窄断言即可：

  for (const parameter in currentModel) {
    // 断言parameter是当前模型配置的合法键
    const paramKey = parameter as keyof typeof currentModel;
    const paramConfig = currentModel[paramKey];
    // 此处可以正常访问paramConfig.default
    console.log(paramConfig.default);
  }
  

注意：因为MODEL是从网络解析得到的，TypeScript类型仅在编译阶段生效，建议在拿到接口返回数据时加一层简单的运行时结构校验，避免接口字段异常导致前端运行时报错。

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