将React ES6迁移到TypeScript:import语句不起作用

Question

我有一个目前用ES6编写的React项目,我正在迁移到TypeScript.我的import陈述有问题.

目前使用ES6,我使用NPM,ex安装了React依赖项npm install react,并使用Babel和Browserify构建输出ES5包.(使用Browserify不是必需的,我只是想让TS使用该项目.)

典型的React ES6文件如下所示:

import React from "react"
import {Router, Route, Link} from "react-router"
import Button from "./components/Button"

export default class App extends React.Component {
    render(){ 
        // ...
    }
}

搬进TS,我已经安装了d.ts文件用我所有阵营的依赖tsd install react/,设置TSC module: "commonjs"和jsx: "react",从转换的几个文件*.jsx来*.tsx,我也得到这些编译的错误import语句:

错误:(1,8)TS1192:模块'"react"'没有默认导出.

该import Button声明没有错误.似乎TSC无法解析NPM模块依赖性.

我怎样才能让它发挥作用？

Answer 1

TypeScript 1.8+

使用--allowSyntheticDefaultImports-add 编译"allowSyntheticDefaultImports": true为tsconfig.json

注意:虽然module在tsconfig.json中进行设置,但这对我不起作用commonjs.

另外...

请改用:

import * as React from "react";
import * as Router from "react-router";

// use React, Router.Router, Router.Route, and Router.Link here

在这里和这里阅读更多.目前react.d.ts使用export =,所以你需要通过做导入它import * as React.

基本上这些库只有一个导出.那是在定义文件中表示的export =.