Question

当我编译一个简单的React / Typescript应用程序（如下所示）时，我得到了各种编译器警告，这些警告似乎不在我的代码中。

/// <reference path="main/ambient/react-dom/index.d.ts" />
/// <reference path="main/ambient/react/index.d.ts" />

import * as React from "react";
import { render } from "react-dom";

class Example extends React.Component<any, any> {
  render() {
    return <p> Hello! </p>;
  }
}

render(<Example />, document.getElementById("root"));

虽然此示例在编译后运行（通过WebPack），但它会生成以下错误：

(19,22): error TS2339: Property 'createElement' does not exist on type '{}'.
(22,9): error TS2339: Property 'Component' does not exist on type '{}'.
(23,13): error TS2339: Property 'render' does not exist on type '{}'.
(23,26): error TS2339: Property 'createElement' does not exist on type '{}'.

我正在运行React v0.14.8。我正在使用这些typings for React和这些typings for React-dom。enter link description here

我的问题是：为什么此示例会产生这么多错误？如何解决这些错误？

请求：tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  },

  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

Answer 1

我找到了解决方案。这些错误是由WebPack（new webpack.optimize.OccurenceOrderPlugin()）中的插件引起的。删除此插件解决了这个问题。

Answer 2

您需要使用typings并定义依赖项的类型。您还可以使用TypeScript here

来引用使用React的非常好的实现

最简单的Typescript + React + WebPack示例会生成错误

2 个答案: