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

【问题标题】：Simplest Typescript + React + WebPack example generates errors最简单的 Typescript + React + WebPack 示例生成错误
【发布时间】：2016-07-21 06:08:54
【问题描述】：

当我编译一个简单的 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
}

【问题讨论】：

你有 tsconfig.json 文件吗？
我已经添加了 tsconfig.json 供参考。
你试过没有 /// 引用吗？使用 tsconfig 文件时，您不再需要这些文件。另外，您说它适用于 webpack，您在全球安装了哪个版本的 typescript？我假设您在运行 tsc 时遇到错误
当与 webpack 一起使用时，我能够删除编译器指令，但不能与 'tsc' 一起使用。 tsc 似乎工作正常，让我相信这可能是 webpack/ts-loader 的问题。

标签： reactjs typescript webpack

【解决方案1】：

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

【讨论】：

【解决方案2】：

您需要使用typings 并为您的依赖项定义类型。您还可以参考使用TypeScript 和React here 的一个非常好的实现@

【讨论】：

我提到我在问题底部使用了类型（使用您提到的确切工具）。这些不正确吗？