typescript - 在 Typescript 中，为什么 JSX.IntrinsicElements 不像文档描述的那样工作？

Question

我正在尝试在服务器端使用 JSX，而不使用 React。我在这里关注关于 JSX 的打字稿文档，并将以下内容写在一个.tsx文件中。

declare namespace JSX {
  interface IntrinsicElements {
    foo: any
  }
}
let elt1 = <foo/>
let elt2 = <bar/>

链接的文档说：

在上面的示例中，<foo/>可以正常工作，但<bar/>会导致错误...

但对我来说，它们都导致相同的错误：

类型“JSX.IntrinsicElements”上不存在属性“foo”。
“JSX.IntrinsicElements”类型上不存在属性“bar”。

标签： typescriptjsx

Answer 1

您需要模块扩充。我从这里得到了答案。尝试这个：

import React from "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      foo: any
    }
  }
}

let elt1 = <foo/>
let elt2 = <bar/>

演示

您的代码不起作用的原因JSX.IntrinsicElements是取自@types/react并重新声明命名空间不起作用。此外，如果您不导入 react ( demo )，您还会注意到您的代码将起作用。模块扩充基本上扩展了@types/react类型。