访问TypeScript嵌套对象属性触发类型错误的技术求助

你的问题出在手动定义的FlagSet和FlagValue类型过于宽泛：FlagSet的属性类型是FlagValue | FlagSet，这意味着TypeScript无法确定defaultFlags.banner到底是字符串/布尔值/数字这类原始类型，还是嵌套对象。出于类型安全的考虑，它会默认认为属性可能是原始类型，自然不允许访问display这类对象属性。

下面是几种可行的解决方法：

方法一：让TypeScript自动推断精确类型 #

直接去掉手动的FlagSet类型标注，让TypeScript根据对象字面量生成完全匹配的嵌套类型，这样访问嵌套属性时不会有任何问题：

const defaultFlags = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

// 正常访问，无报错
const showBanner = defaultFlags.banner.display;

如果需要复用这个类型，可以用typeof提取：

const defaultFlags = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

// 提取出精确的嵌套类型
type FlagSet = typeof defaultFlags;

方法二：使用类型守卫缩小类型范围 #

如果必须保留手动定义的递归类型，可以写一个类型守卫函数，在代码中明确判断当前属性是对象类型，从而安全访问嵌套属性：

// 拆分类型：FlagValue只包含原始类型，FlagSet处理嵌套对象
type FlagValue = string | boolean | number;
type FlagSet = { [key: string]: FlagValue | FlagSet };

// 类型守卫：判断值是否为FlagSet类型
function isFlagSet(value: FlagValue | FlagSet): value is FlagSet {
  return typeof value === 'object' && value !== null;
}

const defaultFlags: FlagSet = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

// 先判断类型，再访问嵌套属性
if (isFlagSet(defaultFlags.banner)) {
  const showBanner = defaultFlags.banner.display; // 无报错
}

方法三：类型断言（临时方案） #

如果只是临时需要访问嵌套属性，可以用类型断言强制告诉TypeScript当前属性的类型，但这种方式会跳过类型检查，建议谨慎使用：

type FlagValue = string | boolean | number | { [key: string]: FlagValue };
type FlagSet = { [key: string]: FlagValue | FlagSet};

const defaultFlags: FlagSet = {
  tracking: false,
  banner: {
    display: false,
    message: "I am the man with no name, Zapp Brannigan!",
  },
  theme: "dark",
};

// 用类型断言指定banner是FlagSet类型
const showBanner = (defaultFlags.banner as FlagSet).display;

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