TypeScript中如何访问对象映射内不同类型值并格式化展示？

核心问题原因 #

TypeScript无法自动推断Object.entries遍历过程中当前val的具体子类型（比如DateRange或NumericRange），即便你明确分支内是Range类型，TS仍会以联合类型string | Range做校验，导致访问Start属性时报错。

解决方案 #

1. 定义精确的基础类型 #

先明确各个嵌套对象的类型，避免模糊的any或宽泛的联合类型：

// 数值范围类型（对应Value字段）
interface NumericRange {
  Min: number;
  Max: number;
}

// 日期范围类型（对应Initial Range字段）
interface DateRange {
  Start: string;
  End: string;
}

// 原始数据对象的类型定义
// 若字段固定，直接明确每个字段的类型更严谨
interface DataObject {
  "Value": NumericRange;
  "Initial Range": DateRange;
  [key: string]: string | NumericRange | DateRange; // 兼容其他可选字符串字段
}

2. 使用自定义类型守卫收窄类型 #

这是最推荐的方式，通过类型谓词函数告诉TS当前值的具体类型：

// 判断是否为日期范围类型的守卫
function isDateRange(val: unknown): val is DateRange {
  return typeof val === 'object' && val !== null && 'Start' in val && 'End' in val;
}

// 判断是否为数值范围类型的守卫
function isNumericRange(val: unknown): val is NumericRange {
  return typeof val === 'object' && val !== null && 'Min' in val && 'Max' in val;
}

// 处理格式化逻辑
const data: DataObject = {
  "Value": { Min: 3.3, Max: 3.9 },
  "Initial Range": { Start: "01 Dec 2022", End: "31 Dec 2022" },
  "Description": "Sample data"
};

const formattedResult = Object.entries(data).map(([key, val]) => {
  if (isNumericRange(val)) {
    return `${key}: ${val.Min} - ${val.Max}`;
  } else if (isDateRange(val)) {
    return `${key}: From ${val.Start} To ${val.End}`;
  } else {
    return `${key}: ${val}`;
  }
});

3. 基于字段名的类型断言（快速解决但需谨慎） #

如果你能确定某个字段对应的类型，可以直接用类型断言跳过TS校验，但要确保逻辑正确，避免运行时错误：

const formattedResult = Object.entries(data).map(([key, val]) => {
  switch(key) {
    case "Value":
      const numRange = val as NumericRange;
      return `${key}: ${numRange.Min} - ${numRange.Max}`;
    case "Initial Range":
      const dateRange = val as DateRange;
      return `${key}: From ${dateRange.Start} To ${dateRange.End}`;
    default:
      return `${key}: ${val}`;
  }
});

注意事项 #

• 优先使用自定义类型守卫，它能在编译时提供严格的类型校验，同时保证代码可读性和可维护性。
• 如果数据结构固定，尽量避免使用宽泛的索引签名，明确每个字段的类型能让TS提供更精准的推断。

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