Question

我正在尝试在没有React的服务器端使用JSX。我正在关注有关JSX here的打字稿文档，并将以下内容写在.tsx文件中。

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

链接的文档说：

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

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

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

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类型。

Answer 2

与其在.tsx文件中创建命名空间，不如在global.d.ts文件夹（或保存TS文件的位置）中创建src文件。

这应该用作您的全局接口文件，并且不再存在该问题。

在Typescript中，为什么JSX.IntrinsicElements不能按文档描述工作？

2 个答案: