可渲染的“类型特征”在打字稿中的反应？

Question

我想我本质上仍然是一名C程序员。我刚刚启动了一个非常简单的助手类来清理一些调试UI：

const MaybeIfValue: React.FC<{text: string, value: any}> = ({text, value}) => {
    if (value === undefined) {
        return null;
    }
    if (value === null) {
        return null;
    }
    return (
        <div>
            <span>{text}</span>{value}<br/>
        </div>
    );
}

...我在想，我真的不想要任何价值。实际上这并不重要，这是一个一次性的辅助函数。但多年来，在开发过程中，我多次意外地尝试渲染复杂的东西。我对Typescript还只是有一定的经验，所以我不太知道它的正确术语，但我想知道的是，我如何断言编译时类型的值是可渲染的？我把它称为C语言中的类型特征。typescript中的术语是什么？匹配？

Answer 1

编辑：更新示例，在看到此答案后，通过ReactChild约束泛型T。

我不能百分之百肯定我理解你的要求，但听起来你想要一个强类型的组件函数。

这是TS手册中函数页面的链接，特别是处理重载签名的部分，我在下面的片段中使用它来提供多个调用签名，每个都有自己的返回类型，取决于props.value的类型。

TS游乐场

import {default as React, ReactChild, ReactElement} from 'react';

function MaybeIfValue (props: { text: string; value?: null | undefined }): null;
function MaybeIfValue <T extends ReactChild>(props: { text: string; value: T }): ReactElement;
function MaybeIfValue ({text, value}: { text: string; value?: unknown }) {
  return (value === null || value === undefined) ? null : (
    <div>
      <span>{text}</span>{value}<br/>
    </div>
  );
};

MaybeIfValue({text: 'hello'}) // null
MaybeIfValue({text: 'hello', value: null}) // null
MaybeIfValue({text: 'hello', value: undefined}) // null

MaybeIfValue({text: 'hello', value: false}) /*
                             ^^^^^
Error: Type 'boolean' is not assignable to type 'ReactChild'.(2769) */

MaybeIfValue({text: 'hello', value: 12}) // ReactElement
MaybeIfValue({text: 'hello', value: 'hello'}) // ReactElement
// etc...

Answer 2

我认为你要找的词只是“类型”。避免任何，这是一个很好的做法，因为它放弃了所有类型检查。

从技术上讲，ReactNode是可渲染的类型，但它有点过于随意，因为它似乎允许对象和函数。

ReactUNICEF是您想要的类型，我相信。它是“可渲染的东西”的类型，通常可以放入一对{}中。

import React, { ReactChild } from 'react'

const MaybeIfValue: React.FC<{text: string, value: ReactChild}> = ({text, value}) => {
  //...
}

测验：

// Works
const goodStr = <MaybeIfValue text='good' value='foo' />
const goodNum = <MaybeIfValue text='good' value={123} />
const goodJsx = <MaybeIfValue text='good' value={<>Foo</>} />

// type errors
const badObj = <MaybeIfValue text='good' value={{ obj: true }} />
const badFn = <MaybeIfValue text='good' value={() => null} />

游戏场

此外，快速提示，您被允许使用==而不是===的一次是为了与null进行比较，这对于null和未定义都是真实的。它节省了大量代码行。

我自己的许多组件顶部也有一条类似的线。

if (value == null) return null