将React ES6迁移到TypeScript:导入语句不工作

Question

我有一个用ES6编写的React项目，我正在迁移到TypeScript。我在import语句上遇到了麻烦。

目前，在使用ES6时，我使用NPM、ex 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之后，我已经使用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时，这并不适用于我。

Alternatively...

用这个代替：

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

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

阅读更多的here和here。目前，react.d.ts使用export =，因此您需要通过执行import * as React导入它。

基本上，这些库只有一个导出。它表示在使用export =的定义文件中。

Answer 2

为了使用以下语法：

import React from 'react';

您需要在tsconfig.json中设置这两个标志

{ "allowSyntheticDefaultImports": true, "esModuleInterop": true }

使用下列版本进行测试：

打字本2.9.2

@类型/反应16.4.7

反应16.4.1