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

Question

我正在尝试在服务器端使用 JSX，而不使用 React。我正在关注有关 JSX 的 typescript 文档 here , 并在 .tsx 中写下以下内容文件。

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

链接文档说:

In the above example, <foo/> will work fine but <bar/> will result in an error ...

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

Property 'foo' does not exist on type 'JSX.IntrinsicElements'.
Property 'bar' does not exist on type 'JSX.IntrinsicElements'.

Answer 1

你需要module augmentation .我从here得到了答案.试试这个:

import React from "react";

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

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

Demo

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