为什么 require('react') 会导致“导入声明冲突”与打字稿？答案

【问题标题】：Why does require('react') cause "Import declaration conflicts" with typescript?为什么 require('react') 会导致“导入声明冲突”与打字稿？
【发布时间】：2016-05-31 16:39:56
【问题描述】：

我正在尝试将 Typescript 与 tsd（尚未升级到 typings）、React 和 JSX 一起使用……哦，天哪！谈论构建系统的复杂性......

当我使用import * as React from 'react' 时，我的.tsx 文件（Typescript + JSX）编译良好（使用gulp-typescript）。但是，当我使用 require 语句时出现错误：

./typings/react/react-global.d.ts(17,1): error TS2440: Import declaration conflicts 
with local declaration of 'React'

如果我只是错误地导入它并且旧的require 和新的import 之间存在一些我还没有摸到的差异，我不会感到惊讶，但我认为我得到的特定类型冲突错误是奇怪的。

只是为了更好地理解导入如何与全局 tsd 声明交互，为什么 require 语句会在此处导致错误？

这是我的index.tsx：

/// <reference path="../typings/tsd.d.ts" />

const config = require('../config')
const express = require('express')
const reactDomServer = require('react-dom/server')
const app = express()

// THIS WORKS
import * as React from 'react'

// THIS DOES NOT
//const React = require('react')

app.get('/', (req, res) => {
  const element = <h1>Hello Denver!</h1>
  res.send(reactDomServer.renderToString(element))
})

const server = app.listen(process.env.port || config.port, () =>
  console.log(`Server listening on port ${server.address().port}!`)
)

这是我的../typings/tsd.d.ts：

/// <reference path="react-router/history.d.ts" />
/// <reference path="react-router/react-router.d.ts" />
/// <reference path="react/react-addons-create-fragment.d.ts" />
/// <reference path="react/react-addons-css-transition-group.d.ts" />
/// <reference path="react/react-addons-linked-state-mixin.d.ts" />
/// <reference path="react/react-addons-perf.d.ts" />
/// <reference path="react/react-addons-pure-render-mixin.d.ts" />
/// <reference path="react/react-addons-test-utils.d.ts" />
/// <reference path="react/react-addons-transition-group.d.ts" />
/// <reference path="react/react-addons-update.d.ts" />
/// <reference path="react/react-dom.d.ts" />
/// <reference path="react/react-global.d.ts" />
/// <reference path="react/react.d.ts" />
/// <reference path="node/node.d.ts" />
/// <reference path="express-serve-static-core/express-serve-static-core.d.ts" />
/// <reference path="express/express.d.ts" />
/// <reference path="mime/mime.d.ts" />
/// <reference path="serve-static/serve-static.d.ts" />

【问题讨论】：

如果你使用全局变量，你不需要import 或require 任何东西。如果您使用的是模块，则不应使用全局引用。
你说的很有道理。但是，如果我删除导入或要求，我会收到 "React" undefined 错误。看来它确实需要某种导入。
你是否在 <script> 标签中加入了反应？
不，这是服务器端的。
那么你不需要/// 引用 React，你只需要导入 React。

标签： javascript reactjs typescript jsx tsd

【解决方案1】：

react-global.d.ts

不要安装 react global。我很高兴看到你已经在使用模块（更多 https://github.com/basarat/typescript-book/blob/master/docs/tips/outFile.md）所以使用 install react as typings install dt~react --save 这将安装模块 react 然后你可以import * as React from "react";

【讨论】：