Typescript 如何将父属性类型判断传播到子属性

发布于01月08日

我有一个条件组件，它仅在满足条件时才呈现应用程序的其他部分.在某些情况下，我可能需要将条件呈现组件使用的变量传递给这个父组件的一些子组件，但TypeScrip不知道这一点，它会报告一个错误.

以下是一些代码:

type AProps = {
  x: string
}
const A: FC<AProps> = ({x}) => {return (<>{x}</>)}

const B = () => {
  let x: string | undefined

  return (
    <ConditionalRender condition={!!x}>
      <A x={x} />
    </ConditionalRender>
  )
}

使用这个代码片段，我有一个关于x={X}的TS错误

Type 'string | undefined' is not assignable to type 'string'.
 Type 'undefined' is not assignable to type 'string'.ts(2322)

这里的问题是，我已经判断了conditionalRender父组件... condition={!!x}>上存在X

我很想找到一种方法来告诉TS，X prop已经被判断过了，它不是未定义的，因为目前，在上面的例子中，我必须在ConditionalRender组件中做这样的事情:

{!!x && <A x={x} />}

type ConditionalRenderProps<T> = { params: T render: (x: NonNullable<T | null | undefined>) => ReactElement } const ConditionalRender = <T,>({ render, params }: ConditionalRenderProps<T>): ReactElement => { if (params === undefined || params === null) { return <></> } return <div>{render(params)}</div> } type AProps = { x: string } const A: FC<AProps> = ({ x }) => { return <>{x}</> } const B = (): ReactElement => { let x: string | undefined = "Hello" return ( <ConditionalRender params={x} render={(params) => { return <A x={params} /> }} /> ) }

Typescript 如何将父属性类型判断传播到子属性

推荐答案

Typescript相关问答推荐

等待的R没有用响应对象展开到R

React typescribe Jest调用函数

如何判断对象是否有重叠的叶子并产生有用的错误消息

访问继承接口的属性时在html中出错.角形

接口中函数的条件参数

TypeScrip中的类型安全包装类

TypeScrip：从对象中提取和处理特定类型的键

如何在省略一个参数的情况下从函数类型中提取参数类型？

有没有办法防止类型交集绕过联合类型限制？

有没有办法取消分发元组的联合？

RXJS将对键盘/鼠标点击组合做出react

如何键入并类型的函数&S各属性

如何正确地将元组表格输入到对象数组实用函数(如ZIP)中，避免在TypeScrip 5.2.2中合并所有值

字幕子集一个元组的多个元素

类型脚本中参数为`T`和`t｜unfined`的重载函数

如何在Type脚本中创建一个只接受两个对象之间具有相同值类型的键的接口？

为什么受歧视的unions 在一种情况下运作良好，但在另一种非常类似的情况下却不起作用？

如何调整项目数组，但允许权重影响顺序

基于泛型类型的条件类型，具有条目属性判断

React router - 如何处理嵌套路由？