使用filter过滤数组后TypeScript未收窄元素类型的问题

我定义了一个包含两个可选属性的接口：

interface A {
  one?: string;
  two?: string;
}

随后我希望将这些属性放入数组中，传给一个期望接收string[]类型参数的组件：

export const MyComponent: React.FunctionComponent<A> = ({one, two}) => {
  return <Query props={[one, two].filter(Boolean)} />
}

尽管我使用filter(Boolean)移除了undefined值，但TypeScript仍报错：

Type '(string | undefined)[]' is not assignable to type 'string[]'.

这是否属于设计问题？难道只能通过类型断言：

return <Query props={[one, two].filter(Boolean) as string[]} />

来解决吗？

为什么会报错？ #

这不是TypeScript的设计缺陷，而是类型系统的局限性——它没办法自动识别filter(Boolean)这种通用过滤逻辑会完全移除数组里的undefined。Boolean函数只是过滤掉所有假值，但TypeScript没法静态推断出剩下的元素一定是string类型，只能给出(string | undefined)[]的模糊推断结果。

不止类型断言，还有这些更安全的解决方法： #

• 自定义类型守卫函数
  写一个明确的类型守卫，让TypeScript能精准识别过滤后的类型：

  const isString = (value: unknown): value is string => {
    return typeof value === 'string';
  };
  
  export const MyComponent: React.FunctionComponent<A> = ({one, two}) => {
    return <Query props={[one, two].filter(isString)} />
  }
  

  这种方式不仅能让TypeScript正确推断类型，运行时也会做真实校验，比类型断言更安全。

• 手动条件筛选
  针对少量属性，直接用条件判断收集有效值，TypeScript能自动推断结果为string[]：

  export const MyComponent: React.FunctionComponent<A> = ({one, two}) => {
    const validProps = [];
    if (one) validProps.push(one);
    if (two) validProps.push(two);
    return <Query props={validProps} />
  }
  

• 用明确的类型守卫过滤（TS 4.8+）
  如果你用的是TypeScript 4.8及以上版本，可以直接在filter里写明确的类型守卫逻辑，TypeScript会自动推断正确类型：

  export const MyComponent: React.FunctionComponent<A> = ({one, two}) => {
    return <Query props={[one, two].filter((v): v is string => v !== undefined)} />
  }
  

内容的提问来源于stack exchange，提问作者sir-haver