Question

我想创建一个返回类型应该返回特定 JSX 类型的函数。

例如：

const setHosting : <GitlabLogo> | <GithubLogo> = (h: Hosting) => ???

这里的返回类型应该是 <GitlabLogo> 或 <GithubLogo>。可能吗？

Answer 1

简而言之——不，这是不可能的。

如果您希望函数返回 JSX 元素（即 <GithubLogo />），那么您不能要求它是特定类型，因为所有 JSX 元素都只是类型 JSX.Element。

如果您希望函数返回组件（即GithubLogo），那么您可以做得更好一点，但也不会好太多。请记住，Typescript 是结构性的，而不是名义上的类型。如果 GitlabLogo 是一个不接受 props 并返回 JSX.Element 的函数组件，那么 any 没有 props 的函数组件都可以分配给 typeof GitlabLogo。所以你不能需要一个特定的组件。您只能要求特定的道具类型。

type Hosting = "gitlab" | "github";

// return an element
const setHostingA = (h: Hosting): JSX.Element => h === "github" ? <GithubLogo/> : <GitlabLogo/>;

// return a component
const setHostingB = (h: Hosting): React.ComponentType<{}> => h === "github" ? GithubLogo : GitlabLogo;
const HostingComponent = setHostingB("github");
const element = <HostingComponent/>

// call as a component - return an element
const HostingLogo = ({hosting}: {hosting: Hosting}): JSX.Element => {
    const Component = hosting === "github" ? GithubLogo : GitlabLogo;
    return <Component/>;
}
const a = <HostingLogo hosting="github"/>;
const b = <HostingLogo hosting="gitlab"/>;

Typescript Playground Link

如何基于 JSX 约束函数的返回类型？

1 个答案: