反应：根据其他组件中的条件使打字稿推断子类型

Question

我想编写一个仅在某些给定属性不为null时才呈现其子级的组件（例如，在获取某些数据时呈现加载程序，并在获取完成时以实际数据进行更新）。这很简单：

import React, { ReactElement, ReactNode, useState } from 'react'

type TState = {
    data: {
        text: string
    } | null
}

type NotNullProps = {
    children: ReactNode
    state: TState
}

const NotNull = ({ children, state }: NotNullProps) => {
    if (!state.data) {
      return null
    }

    return <>{children}</>
}

现在，如果我想使用此组件这种方式，怎么办？

const Example = () => {
    const [state] = useState<TState>({ data: null })

    return (
        <NotNull state={state}>
            <div>{state.data.text}</div> // <--- "Object is possibly 'null'."
        </NotNull>
    )
}

打字稿正确地表示state.data可以为空，因为它无法推断NotNull中发生的事情，但是state.data永远不会为空，因为NotNull会对其进行检查。我知道这可以通过渲染道具解决，但是它们会使代码更加混乱。因此，有没有一种方法可以使[script]不会抱怨/无法推断正在发生的事情来键入NotNull？

这里是一个游乐场尝试：https://tsplay.dev/zwORWq

（是的，我知道Suspense和其他内容，但是与这个问题无关。我只是想知道是否有一种方法可以以打字稿可以推断出该值不为null的方式键入此组件（再次，没有渲染道具））。

我想编写一个仅在某些给定属性不为null时才呈现其子级的组件（例如，在获取某些数据时呈现加载程序，并在获取完成时以实际数据进行更新）。这个...

Answer 1

您仍然需要检查state.data是否为null，因为即使您的NotNull组件阻止了子级的[[rendered