问题标签 [tsx]

我正在将 PhpStorm 用于 Web 项目，并且我想使用TSX 语言（Typescript/JSX），但它似乎不受支持。

我想继续使用 PhpStorm 并避免在其他 IDE 之间切换。

我有哪些选择？

我有一个带有 React 组件的 TypeScript TSX 文件，如下所示：

如何在 TypeScript 中正确呈现此组件？

'typeof Hi' 类型的参数无法分配给 'ComponentClass' 类型的参数，这让我失望了。我正在使用来自Boris Yankov 的DefinitelyTyped 存储库中的绝对类型文件。

如何在 Typescript tsx 中遍历 React 组件的子组件？

以下将是有效的 jsx：

但是，在 Typescript 中，x 的类型是React.ReactElement<any>所以我无法访问道具。我需要做某种类型的演员吗？

使用以下 TSX 代码：

使用“保留”选项时，我得到以下 JSX 代码：

“/Provider”结束标签与“react_redux_1.Provider”开始标签不匹配

我究竟做错了什么 ？

typescript 1.8.0-dev.20151204 目标 es5 模块 commonjs jsx 保留

我的应用程序使用 .ts、.js 和 .jsx 文件编译并运行。现在我尝试将 .jsx 文件更改为 .tsx 并且它会中断。

如何修复此编译错误：

当我编译这段代码时：

使用这个 webpack 配置文件：

这个 tsconfig.json 文件：

我一直在研究在 TypeScript 中开发基于 React 的组件的良好工作流程。

从 1.6 开始，TypeScript 通过扩展在 TypeScript 文件中原生支持 JSX，.tsx并且tsd我们可以获得 IDE (atom/WebStorm) 来支持类型检查。

但是，似乎没有一种简单的方法来测试用tsx.

你能分享你对此的见解吗？

我正在考虑（几乎不得不使用）Jest而不是 pure Jasmine，因为Jest的运行时环境带有 DOM。但是，jest 似乎仅适用于 ES2015 throughbabel和es2015, react预设。有没有现成的方法可以Jest使用tsx？

目前，我可以测试用 ES2015 编写的 React 组件，例如：

相应的测试可能如下所示：

这很好用，但是如果我们用 , 替换.js扩展名.tsx并将其更改scriptPreprocessor为：

一切都乱套了，尤其是关于 TypeScript 处理模块加载的方式

简单的例子：

结果：

(10,9)：错误 TS2605：JSX 元素类型“元素”不是 JSX 元素的构造函数。

请注意，错误与组件的使用有关（let x 声明）。似乎 React 的定义文件不允许这是一个有效的 JSX？我正在使用来自 tsd 的最新 React 0.14 定义文件，我做错了什么？

假设我已经定义了以下无状态功能组件（React v0.14）

在不同的组件中，我这样使用它：

我从打字稿编译器收到此错误：

错误 TS2605：JSX 元素类型“元素”不是 JSX 元素的构造函数。“元素”类型中缺少属性“渲染”。

我该如何解决？在打字稿中使用无状态功能组件的正确方法是什么？我正在使用来自 tsd的最新react.d.ts

我正在使用带有反应的 VS 2013 和 tsx 文件。我可以手动构建我的项目就好了。（右键单击并构建解决方案）

但是当我尝试在 Azure 上发布时，VS 会尝试再次构建，但当时我收到了一堆错误，如下所示：

并指向我的 tsx 文件。

似乎 Azure Publish 使用与 VS 2013 不同的构建步骤。

我该如何解决这个问题？

我正在尝试创建一个React Stateless Function 组件，如 TypeScript 1.8 release notes中所述。这编译没有错误，但TypeError在运行时抛出一个。为什么？

我有一个界面

我的组件如下所示： import * as React from "react";

它从另一个组件中使用，如下所示：

这编译没有错误。但是，在运行时我收到错误：Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…). 错误指向我的无状态函数中的行： <div className="col-lg-12" id={this.props.error.id}>

完整的堆栈跟踪如下。

这一切都作为一个正常的组件工作得很好。

版本信息：Typescript 1.8.7，react 0.14.7

我react.d.ts是通过打字安装的，它似乎是最新的。

完整的 TypeError 堆栈跟踪：

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(...)ErrorMessage @
error.message.tsx:6ReactCompositeComponentMixin.mountComponent @
ReactCompositeComponent.js:148wrapper@ReactPerf.js:66ReactReconciler.mountComponent@ReactReconciler.js:37ReactMultiChild.Mixin._mountChildByNameAtIndex@ReactMultiChild.js:474ReactMultiChild.Mixin._updateChildren@ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren@ReactDOMMultiChild.js:326React Mixin。 js:544ReactCompositeComponentMixin.updateComponent@ReactCompositeComponent.js:473wrapper@ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary@ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary@ReactReconciler.js:102runBatchedUpdates@ReactUpdates.js:129Mixin.perform@Transaction.js:136Mixin.perform@Transaction.js:136assign.perform@ReactUpdates。 js:86flushBatchedUpdates@ReactUpdates.js:147wrapper@ReactPerf.js:66Mixin.closeAll@Transaction.js:202Mixin.perform@Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates@ReactDefaultBatchingStrategy.js:62enqueueUpdate@ReactUpdates.js:176enqueueUpdate@ReactUpdateQueue.js: 24ReactUpdateQueue.enqueueSetState@ReactUpdateQueue.js:190ReactComponent.setState@ReactComponent.js:65ErrorContainer._onModelUpdate@error.container.tsx:32(匿名函数)@observable-factory.ts:21arrayEach@lodash.js:483forEach@lodash.js:7827notifyAll@observable-factory.ts:21setErrors@error.model.ts:38report@error.model.ts:15report@error.service.ts:5_handleError@session.service。 ts:34

我正在尝试在 Typescript .tsx 文件中使用 Polymer 自定义标签，但这会导致编译错误：

错误是：

谁能提示如何解决这个问题？