如何在函数校验后让TypeScript推断变量非空类型？

你遇到的问题本质是：普通返回布尔值的函数无法让TypeScript关联到变量的类型收缩。要解决这个问题，可以用**TypeScript类型谓词（Type Predicates）**改造校验函数，让它明确告诉TypeScript校验通过后变量的具体类型。

具体改造步骤 #

1. 修改isLoaded函数的返回类型为类型谓词
   将函数返回值从boolean改为data is ResponseData，这样当函数返回true时，TypeScript就会自动把data的类型从ResponseData | undefined收缩为确定的ResponseData：

   const isLoaded = (): data is ResponseData => {
       // 复杂逻辑校验数据是否已加载且合法
       return !isLoading && !!data && Object.keys(data).length > 0
   }
   

2. 在JSX中直接使用改造后的函数
   此时TypeScript能正确识别校验结果，不会再报错：

   return (
       <>
           <div>My data title:</div>
           {isLoaded() && <div>{data.title}</div>} // 类型推断正确，无报错
       </>
   )
   

额外说明 #

• 类型谓词的核心语法是[变量名] is [目标类型]，这里因为data是组件闭包内的状态变量，无需作为参数传入函数，直接在返回类型中声明即可。
• 如果需要更严格的校验（比如确保data的必填字段都存在），可以把目标类型改成更具体的版本，比如data is Required<ResponseData>，或者自定义包含必填字段的接口。

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