2

我正在使用 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 堆栈（秘银）。提前致谢！

4

3 回答 3

2

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

这很简单，如下所述：

正如错误所说：“因为全局类型'JSX.Element'不存在”

您可以定义这些类型：

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

我建议从DefiniteTyped 获取react-jsx.d.ts 文件

您可以将此文件用作更完整类型的源（您需要定义 IntrinsicElements 中的每个子元素，即div, p,a等）

使用 TSX 和 Mithril 走得更远：

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

我认为有两种方法可以使它工作：

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

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

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

另一种解决方案是保留"jsx":"preserve"和使用 Babel，如秘银文档中所述，将jsx文件（由 typescript 从tsx文件生成）转换为有效js文件。

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

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

于 2017-06-10T20:55:22.893 回答
1

由于缺乏声誉，它不会让我评论你上面的答案，所以我将把它包含在我自己的答案中。

首先，您可以在项目的顶部包含此要点并将其命名为 mithril-jsx.d.ts 之类的名称，以便 typescript 将其视为类型定义而不会编译它。链接的要点简单地声明JSX.element为m.Vnode<any, any>并列出了JSX.IntrinsicElementsas下的每个 HTML 元素any。不是什么大不了的事，但可以节省时间。

其次，以及我什至发布此内容的原因：您不需要gulp 或任何其他工具来将.tsx文件编译为使用秘银的文件.js。您所要做的就是在您的tsconfig.json

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

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

于 2017-07-01T05:28:31.600 回答
0

我也在使用 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"
  }
}
于 2019-08-16T17:46:30.187 回答