TypeScript可空/未定义值处理：解决TS2531空对象报错

核心问题定位 #

1. 空值判断逻辑失效 #

原代码的if判断条件value !== null || value !== undefined 是布尔逻辑下的永真式，完全起不到空值拦截的作用：

任何一个值都不可能同时等于null和undefined，因此「值不等于null 或者 值不等于undefined」的判断结果永远为true。无论传入的value是null、undefined还是合法的数值/字符串，程序都会进入if块，TS没法基于这个恒真的条件完成类型收窄，自然会在后续可能为空的引用位置抛出「Object is possibly 'null'」的TS2531错误。

2. 方法重复调用导致类型收窄完全失效 #

numeral实例的val.value()方法，在传入参数为null、undefined或者非合法数值格式时，返回值类型本身为number | null。原代码中在if条件里第一次调用val.value()做真值判断，但后续模板字符串里第二次调用val.value()做数值运算：TS的静态分析默认方法存在副作用，无法保证两次调用的返回值完全一致，哪怕if块内做了真值判断，第二次调用的返回值依然会被判定为可能为null，直接触发TS2531校验错误。

可直接通过编译的修正代码 #

import numeral from 'numeral';
type formatterType = string | number | undefined | null;

export const formatPercent = (value: formatterType, multiplier = 1): string => {
  // 宽松相等判断等价于同时拦截null、undefined入参，避免重复写两个判断条件
  if (value != null) {
    const val = numeral(value);
    const currentVal = val.value();
    // 对方法返回值做显式非空判断，完成类型收窄
    if (currentVal !== null) {
      return `${currentVal * multiplier}%`;
    }
  }
  return '0%';
};

补充说明 #

• 原代码中先调用numeral(value)再做空值判断的顺序可以调整为：先确认入参有效再实例化numeral对象，减少无意义的对象创建开销。
• 这类逻辑bug是严格空值检查下的高频问题：想要过滤掉null和undefined两个值时，必须用*逻辑与（&&）连接两个判断条件，用逻辑或（||）*会形成永远为真的无意义判断。
• 做类型收窄时，尽量把方法的返回值先赋值给独立变量，再基于变量做判断。不要在if条件和后续逻辑里重复调用同一个返回联合空类型的方法，TS无法跨方法调用做一致性校验，收窄效果会完全失效。

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