JSX TypeScript 定义覆盖自定义框架的组件？

Question

我正在开发一个开源 JS 框架，我想将 JSX 与 typescript 一起用于它的组件。但是我对 JSX 的类型定义有疑问

TS 预计：

<Header title="Hello World" />

成为（对于任何类似反应的框架）：

function Header(props: { title: string }) : JSXElement

而在这个框架中，实际类型是基于 Observables ( RxJS )：

function Header(props: Observable<{ title: string }>) : JSXElement | Observable<JSXElement>

例如一个简单的h1标题组件：

function Header(props$) { // take in a stream of updates
  return props$.pipe(     // return a stream of JSX updates
    map(props => <h1>{ props.title }</h1>)
  );
}

因此，组件接收一个 Observable 属性并返回一个静态 JSX 元素或一个 JSX 元素流。

UPD 澄清：该框架已经按照我的描述工作，类型是问题所在。Observables 在引擎运行时处理，而不是在转换阶段，所以 JSX 转换到createElement是好的。我只需要调整 TSX 的类型，例如：

// current:
createElement<P>(fn : (props: P) => JSXElement, props: P, ...children: JSXElement[])

// should be:
createElement<P>(fn : (props: Observable<P>) => JSXElement, props: P, ...children: JSXElement[])

我看到可以部分自定义JSX，但我还没有找到覆盖它的方法。我试图覆盖JSX.Element并且JSX.ElementType没有对打字结果的任何可见更改。

甚至可以执行此覆盖吗？

我应该覆盖哪些类型/接口？

谢谢！

~~我不是链接repo 免得有广告嫌疑~~

UPD：有关详细信息，您可以在此处找到框架：http : //recks.gitbook.io/

Answer 1

似乎LibraryManagedAttributes可以实现我正在寻找的覆盖。

Preact 使用它来添加defaultProps组件类型：

type LibraryManagedAttributes<Component, Props> = Component extends {
  defaultProps: infer Defaults;
}
  ? Defaultize<Props, Defaults>
  : Props;

所以我同样用以下方法覆盖它：

type LibraryManagedAttributes<Component, Props> =
    Props extends Observable<infer O>
    ? O
    : EmptyProps;

interface EmptyProps {}

EmptyProps是一种确保没有正确类型的组件不会接受属性的黑客方法。

它似乎有效（至少影响类型）：

注意：如此屏幕截图所示，您需要通过命名空间global.[LIB_NS].JSX或直接通过global.JSX. 有关更多详细信息，请参阅官方文档最底部的部分： https: //www.typescriptlang.org/docs/handbook/jsx.html#factory-functions

非常感谢Josep M Sobrepere给我关于 preact 覆盖的提示LibraryManagedAttributes！