TypeScript 2 TSX preserve and noimplicitany 错误 TS2602：全局类型 'JSX.Element' 不存在

Question

我正在使用 TypeScript 2 和 TSX 并保留（不是 React）设置并启用 "noImplicitAny"：

"noImplicitAny": true,
"jsx": "preserve"

问题是，我在尝试构建一个简单的 TSX 文件时不断收到此错误：

error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

这是我的 TSX 文件的示例：

'use strict';

import m from './m';

export default {
  view() {
    return (
      <h1>Hello Mithril!</h1>
    );
  }
};

我正在尝试让 TSX 使用非 React 堆栈 (Mithril)。提前致谢！

Answer 1

原问题答案：（TS2602错误如何解决）

这很简单，因为explained here:

As the errors say: "because the global type 'JSX.Element' does not exist"

you can define those types:

declare namespace JSX {
  interface Element { }
  interface IntrinsicElements { div: any; }
}

I recommend getting the react-jsx.d.ts file from DefinitelyTyped

您可以使用 this file 作为更完整类型的来源（您需要为 IntrinsicElements 中的每个子元素定义，即 div、p、a, 等等)

利用 TSX 和 Mithril 走得更远：

一旦你解决了打字问题，你会发现你还差得远。如果使用 "jsx": "preserve" 设置，HTML 代码将直接写入生成的 js 文件中，无需任何翻译。这当然不能通过网络浏览器加载（因为它是一个 javascript 文件，而不是 html 文件）。

我认为有两种方法可以让它发挥作用：

想到的第一个解决方案是使用 "jsx":"react" 并编写一个小包装器将调用转发给 mithril，如下所示：

class React {
  public static createElement(selector: string, attributes: object, ...children: Mithril.Child[]): Mithril.Child {
    return m(selector, attributes, children);
  }
}

这是我目前使用的解决方案，因为它不涉及其他工具。

另一个解决方案是保留"jsx":"preserve"并使用Babel，as described in mithril documentation来翻译jsx文件（由tsx文件的typescript生成）到有效的 js 文件。

最后，我设法让它工作了，但我发现这个过程非常混乱，typescript/npm 模块系统阻碍了 JSX 类型扩展 Mithril 类型（这样你的函数可以 return 秘银兼容类型）等。我不得不修改秘银类型（并删除 npm @types/mithril），并添加一些我自己的模块。

我很想知道是否有人以优雅而简单的方式解决了这个问题！

Answer 2

由于缺乏声誉，我无法对您上面的回答发表评论，因此我会将其包含在我自己的回答中。

首先，您可以在项目顶部包含 this gist 并将其命名为 mithril-jsx.d.ts 这样 typescript 会将其视为类型定义并且不会编译它。链接的要点只是将 JSX.element 声明为 m.Vnode<any, any>，并将 JSX.IntrinsicElements 下的每个 HTML 元素列为 any。没什么大不了的，但可以节省时间。

其次，我什至发布这个的原因：你 不需要 需要 gulp 或任何其他工具来将 .tsx 文件编译成 mithril - 使用 .js 个。您所要做的就是在 tsconfig.json

中指定这些

{
  "compilerOptions": {
    //...your other stuff here
    "jsx": "react",
    "jsxFactory": "m"
  }
}

有关编译器选项的更多信息：http://www.typescriptlang.org/docs/handbook/compiler-options.html

Answer 3

我也在使用 Mithril(2.0.3) 和 TypeScript(3.5.3) 进行开发。

TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

可以通过安装 @types/react.

解决此错误消息

npm install --save-dev @types/react

tsconfig.json 具有以下设置。

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "m"
  }
}

TypeScript 2 TSX preserve and noimplicitany 错误 TS2602：全局类型 'JSX.Element' 不存在

TypeScript 2 TSX preserve and noimplicitany error TS2602: the global type 'JSX.Element' does not exist

mithril.js

tsx

typescript2.0