I am trying to use Typescript with tsd
(haven't upgraded to typings
yet), React, and JSX together... oh my! Talk about build system intricacies...
My .tsx
file (Typescript + JSX) compiles fine (using gulp-typescript
) when I use import * as React from 'react'
. I get an error, however, when I use a require
statement:
./typings/react/react-global.d.ts(17,1): error TS2440: Import declaration conflicts
with local declaration of 'React'
I wouldn't have been surprised if I just imported it wrong and there is some difference between old require
and new import
that I haven't grokked yet, but I thought the particular type conflict error I got was strange.
Just so I understand how imports interact with global tsd declarations better, why does the require
statement cause an error here?
Here is my 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}!`)
)
Here is my ../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" />
react-global.d.ts
Don't install react global. I am glad to see you already using modules (more https://github.com/basarat/typescript-book/blob/master/docs/tips/outFile.md ) so use install react as typings install dt~react --save
which will install the module react which you can then import * as React from "react";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.