javascript - 在没有 React 的情况下在 TypeScript 中使用 JSX

Question

让 TypeScript 识别 JSX(尤其是在 VS Code 中)而不依赖 React 的简单方法是什么？如果我们必须使用自定义 JSX 命名空间和自定义渲染器，那么该命名空间和渲染器的内容的预期形状是什么？

据我所知，JSX 只是转换成函数调用的语法糖(例如，React.createElement)，所以应该有一种方法来指定应该使用不同的函数用于转换 JSX。

查看 release docs for TypeScript 2.8 ，我看到有标题为“Per-file JSX factories”和“Locally scoped JSX namespaces”的部分，但我在当前的官方 TypeScript 文档中没有看到这些部分.这些功能是否已弃用？

Answer 1

jsx 和 jsxFactory compiler options对此负责。

TypeScript 期望在 jsxFactory 中定义的函数存在于模块范围内。通常这需要导入 React，因为 jsxFactory 默认为 React.createElement。

如果编译器配置为:

...
"jsx": "react",
"jsxFactory": "h",
...

那么 h 函数应该存在。应该定义与 JSX 相关的类型以使类型检查正常工作:

declare namespace JSX {
  interface Element {}
  interface ElementClass {
    render(): any;
  }
  interface IntrinsicElements {
    div: any;
    // ...
  }
}

const h = (Comp: any): any => console.log(`creating ${Comp} element`);

<div/>;

class FooComponent {
  render = () => null;
}

<FooComponent/>;