TypeScript中Pick<>传参报错：boolean|undefined为何无法赋值？

组件代码 #

interface ElementsProps {
    a: number,
    b: string,
    c?: boolean
}

interface FooProps {
    elements: Pick<ElementsProps, "a" | "b" | "c">[]
}

const Foo = ({elements}: FooProps) => {
    const doSomething = (c: Pick<ElementsProps , "c">) => {
        return ...
    }

   return elements.map(element => doSomething(element.c))
}

运行时错误 #

错误位置：

return elements.map(element => doSomething(element.c))
                                              ^

错误提示：

TS2345: Argument of type 'boolean | undefined' is not assignable to parameter of type 'Pick<ElementsProps , "c">'.
Type 'undefined' is not assignable to type 'Pick<ElementsProps , "c">'.

错误原因解析 #

• 类型定义与传参不匹配：Pick<ElementsProps, "c"> 生成的是一个对象类型 { c?: boolean }，它表示的是包含可选属性c的对象，而非c属性本身的类型。但你调用doSomething时传入的是element.c，它的类型是boolean | undefined（因为c是可选属性），两种类型完全不兼容，触发TypeScript类型检查错误。
• 可选属性的额外限制：即便你想传入包含c的对象，element中的c可能为undefined，但Pick<ElementsProps, "c">要求必须是一个对象（哪怕对象里的c是undefined），不能直接传undefined，这也会导致类型不匹配。

常见修正方向 #

1. 如果doSomething只需要c属性的值，直接调整参数类型：

const doSomething = (c: boolean | undefined) => {
    // 业务逻辑
}

2. 如果确实需要传入包含c的对象，需确保传入的是对象结构，并处理c为undefined的场景：

// 过滤掉c为undefined的元素后再处理
return elements
  .filter(element => element.c !== undefined)
  .map(element => doSomething({ c: element.c }))

内容的提问来源于stack exchange，提问作者four-eyes