TypeScript编译器为何不对泛型接口的null值做类型检查？

基于React的useState Hook编写了如下自定义hook：

export interface IUseValuedState<T> {
    value: T;
    setState: (value: T) => void;
    isExist: boolean;
}

export function useValuedState<T>(initialValue: T): IUseValuedState<T> {
    const [value, setValue] = useState<T>(initialValue);

    const setState = (value: T) => {
        setValue(value);
    };

    const isValueExist = value !== null && value !== undefined;

    return {
        value: value,
        setState: setState,
        isExist: isValueExist,
    };
}

执行const something = useValuedState<Something[] | null>(null)初始化后，在如下foo函数中通过多层判断排除null情况：

function foo(){
  if (!something) return "something is null"
  if (!something.value) return "something value is null"
  if (!something.isExist) return "something is null"

   // 预期类型为Something[]，但仍显示为Something[] | null
  return something
}

TypeScript编译器无法识别该值已非null，请问这是什么原因？

• 类型关联缺失：TypeScript无法建立isExist和value之间的类型绑定关系。isExist只是普通布尔类型，编译器不知道它和value是否为null/undefined存在必然关联，因此即便判断isExist为true，也不会自动将value的类型从Something[] | null缩小为Something[]。
• 类型缩小的局限性：TypeScript仅能识别对属性的直接判断（如something.value !== null），而isExist是派生属性，编译器无法追踪它与value的依赖逻辑。
• 对象整体类型未更新：something的整体类型是IUseValuedState<Something[] | null>，即便内部value的类型被临时缩小，整个对象的类型并未改变，返回时value仍保留联合类型。

方案1：用类型谓词建立关联 #

给IUseValuedState添加类型谓词函数，让编译器能通过该函数判断value的具体类型：

export interface IUseValuedState<T> {
    value: T;
    setState: (value: T) => void;
    isExist: boolean;
    // 新增类型谓词函数
    hasValue(): this is IUseValuedState<Exclude<T, null | undefined>>;
}

export function useValuedState<T>(initialValue: T): IUseValuedState<T> {
    const [value, setValue] = useState<T>(initialValue);

    const setState = (value: T) => {
        setValue(value);
    };

    const isValueExist = value !== null && value !== undefined;

    return {
        value,
        setState,
        isExist: isValueExist,
        hasValue(): this is IUseValuedState<Exclude<T, null | undefined>> {
            return isValueExist;
        },
    };
}

使用示例：

function foo(){
  if (!something.hasValue()) return "something is null or undefined"

  // 此时something.value的类型自动缩小为Something[]
  return something.value
}

方案2：直接判断value属性 #

放弃使用isExist，直接对value进行null/undefined判断，TypeScript能正确识别这种直接判断的类型缩小：

function foo(){
  if (!something) return "something is null"
  if (something.value === null || something.value === undefined) return "something value is null"

   // 此时something.value的类型为Something[]
  return something
}

方案3：使用区分联合类型 #

重新定义类型，让isExist成为类型区分符，TypeScript会根据isExist的值自动推断value的类型：

// 定义两种状态的联合类型
type ValuedState<T> = 
  | { value: Exclude<T, null | undefined>; setState: (value: T) => void; isExist: true }
  | { value: T; setState: (value: T) => void; isExist: false };

export function useValuedState<T>(initialValue: T): ValuedState<T> {
    const [value, setValue] = useState<T>(initialValue);

    const setState = (value: T) => {
        setValue(value);
    };

    const isValueExist = value !== null && value !== undefined;

    return {
        value,
        setState,
        isExist: isValueExist,
    } as ValuedState<T>;
}

使用示例：

function foo(){
  if (!something.isExist) return "something is null or undefined"

  // 此时something.value的类型自动缩小为Something[]
  return something
}

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