TypeScript：传递字符串Prop时避免显式undefined检查及checkVar类型消错

要解决这个问题，核心是让TypeScript识别你的checkVar函数具备类型收窄能力——也就是当函数返回true时，能确定传入的变量是string类型而非undefined。你需要把checkVar定义成自定义类型守卫函数，具体做法如下：

修改checkVar的类型定义 #

将函数的返回类型从boolean改为x is string，这是TypeScript的类型守卫语法，专门用来告诉编译器：当这个函数返回true时，参数x的类型就是string。

修改后的完整代码：

// TestComponent accepts a string parameter fooProp.  
function TestComponent({ fooProp }: { fooProp: string }) {  
  // ... some actions with fooProp  
  return null;  
}  

// foo variable can be string or undefined.  
const foo = Math.random() > 0.5 ? 'foo value' : undefined;  

// 自定义类型守卫函数：返回true时，x一定是string类型
const checkVar = (x: string | undefined): x is string => !!x;  

// 此时TypeScript能自动收窄foo的类型为string
if (checkVar(foo)) {  
  return <TestComponent fooProp={foo} />; // 不再报错
}

为什么这样能解决问题？ #

TypeScript本身无法自动推断普通函数的返回值和参数类型之间的关联，而x is string这种类型守卫语法，相当于给编译器一个明确提示：只要这个函数返回true，就可以把参数的类型从string | undefined收窄为string。这样在if分支里，foo的类型就被确定为string，完全符合TestComponent的fooProp参数要求，自然不会出现类型不匹配的报错。

补充说明 #

如果不想自定义函数，也可以直接用TypeScript内置的类型检查逻辑，比如：

if (typeof foo === 'string') {
  return <TestComponent fooProp={foo} />;
}

但你的问题聚焦于自定义函数的类型定义能力，所以自定义类型守卫是最贴合需求的方案。

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