TypeScript中布尔真值类型收窄失效问题求助

问题重现 #

使用自定义函数在if/else分支中做类型判断时，无法实现直接写判断条件那样的类型收窄效果，导致后续访问属性时报错。

类型定义 #

type SimpleCellContent = string | number;
type ComplexCellContent = {
  content: SimpleCellContent;
  formatter: (content: any) => string;
  class?: string;
  link?: string;
  linkClass?: string;
};
type CellContent = SimpleCellContent | ComplexCellContent;

逻辑代码 #

const isSimpleContent = (cellData: CellContent) => {
  return typeof cellData === 'string' || typeof cellData === 'number' || typeof cellData === 'undefined';
};

const extractContent = (cellData: CellContent) => {
  if (isSimpleContent(cellData)) {
    return cellData;
  } else if (typeof cellData.content !== 'undefined') { // <--- 错误！🚨
    return cellData.content;
  } else {
    throw new Error('Invalid cell data: ' + JSON.stringify(cellData));
  }
};

报错信息 #

Property 'content' does not exist on type 'CellContent'.
  Property 'content' does not exist on type 'string'. ts(2339)

直接将isSimpleContent(cellData)替换为函数内部的判断条件时，代码可正常运行，核心疑问是：为何函数方式无法实现相同的类型收窄？

原因解释 #

TypeScript的类型收窄依赖类型守卫机制，普通函数默认不会被TS识别为类型守卫——即便函数内部的判断逻辑能精准区分类型，TS也无法自动推断出判断后的参数类型范围。

要让自定义函数具备类型收窄能力，必须给函数添加类型谓词（Type Predicate），明确告知TS：当函数返回true时，参数的具体类型是什么。

修改后的isSimpleContent函数如下：

const isSimpleContent = (cellData: CellContent): cellData is SimpleCellContent | undefined => {
  return typeof cellData === 'string' || typeof cellData === 'number' || typeof cellData === 'undefined';
};

这里的cellData is SimpleCellContent | undefined就是类型谓词，它告诉TS：如果函数返回true，那么cellData必然属于SimpleCellContent | undefined类型。此时在else分支中，TS会自动推断出cellData只能是ComplexCellContent类型，访问cellData.content就不会再报错。

另外需要注意：原CellContent类型未包含undefined，但函数判断中加入了typeof cellData === 'undefined'，建议同步调整类型定义避免不一致：

type CellContent = SimpleCellContent | ComplexCellContent | undefined;

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