TypeScript循环中无法收窄对象属性类型的问题

你遇到的问题是：判别式联合类型TFlavour作为对象值使用时，直接访问对象属性（如IceCreams.Mango）时TypeScript能正确识别判别式并完成类型收窄，但通过Object.keys()遍历对象键的循环内，无法完成类型收窄，导致访问naturalComponent或artificialComponent时报错。

问题代码示例 #

type TFlavour = ({ 
    natural: true,
    naturalComponent : string
}) | ({ 
    natural: false,
    artificialComponent: string
}) 

type TIceCream = Record<string, TFlavour>

const IceCreams: TIceCream = {
    CokeIceCream: {
        natural:false,
        artificialComponent: 'Coke'
    },
    Vanilla: {
        natural: true,
        naturalComponent: 'Vanilla Extract'
    },
    Mango: {
        natural: true,
        naturalComponent: 'Mango Fruit'
    }
}

const iceCreamKeys = Object.keys(IceCreams)

// 此处TypeScript报错：属性“naturalComponent”在类型“TFlavour”上不存在
iceCreamKeys.forEach( item => {
    if(IceCreams[item].natural){
        console.log(IceCreams[item].naturalComponent) 
    }
})

// 直接访问时类型收窄正常
if(IceCreams.Mango.natural){
    console.log(IceCreams.Mango.naturalComponent) 
}

核心原因 #

Object.keys()返回的类型是string[]，而非keyof TIceCream——这是因为JavaScript允许对象拥有额外的可枚举属性，TypeScript无法确保返回的键完全匹配类型定义中的键。当使用string类型的键访问对象时，TypeScript只能推断值为TFlavour联合类型，无法在后续条件判断中持续跟踪该值的具体分支类型，从而无法完成自动类型收窄。

解决方案 #

方案1：使用类型安全的键获取函数

定义一个工具函数，将Object.keys()的返回值断言为keyof T类型，让TypeScript知道遍历的键是对象的合法键：

function getTypedKeys<T extends object>(obj: T): Array<keyof T> {
  return Object.keys(obj) as Array<keyof T>;
}

// 使用类型安全函数获取键
const iceCreamKeys = getTypedKeys(IceCreams);

iceCreamKeys.forEach(item => {
  const flavour = IceCreams[item];
  if (flavour.natural) {
    console.log(flavour.naturalComponent); // 类型收窄正常，无报错
  } else {
    console.log(flavour.artificialComponent); // 同样支持类型识别
  }
});

方案2：将值赋值给局部变量

在循环内将当前值赋值给一个局部变量，帮助TypeScript保留类型上下文，从而完成类型收窄：

iceCreamKeys.forEach(item => {
  const currentFlavour = IceCreams[item];
  if (currentFlavour.natural) {
    console.log(currentFlavour.naturalComponent); // 类型识别正常
  }
});

方案3：使用as const断言对象获取精确类型

通过as const让TypeScript推断出对象的精确字面量类型，结合类型安全键函数使用，能获得最严格的类型检查：

const IceCreams = {
    CokeIceCream: {
        natural: false,
        artificialComponent: 'Coke'
    },
    Vanilla: {
        natural: true,
        naturalComponent: 'Vanilla Extract'
    },
    Mango: {
        natural: true,
        naturalComponent: 'Mango Fruit'
    }
} as const;

type TIceCream = typeof IceCreams;

const iceCreamKeys = getTypedKeys(IceCreams);

iceCreamKeys.forEach(item => {
  const flavour = IceCreams[item];
  if (flavour.natural) {
    console.log(flavour.naturalComponent);
  } else {
    console.log(flavour.artificialComponent);
  }
});

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