reactjs - 将 React ES6 迁移到 TypeScript : import statements don't work

Question

我有一个目前用 ES6 编写的 React 项目，我正在迁移到 TypeScript。我在使用 import 语句时遇到问题。

目前，对于 ES6，我使用 NPM 安装了 React 依赖项，例如 npm install react，并使用带有 Browserify 的 Babel 来构建输出 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/ 为我所有的 React 依赖项安装了 d.ts 文件。 , 设置 TSC module: "commonjs" 和 jsx: "react", 将一些文件从 *.jsx 转换为 *. tsx，我在 import 语句中得到了这些编译错误:

Error:(1, 8) TS1192: Module '"react"' has no default export.

import Button 语句没有给出错误。似乎 TSC 无法解析 NPM 模块依赖关系。

我怎样才能让它工作？

Answer 1

typescript 1.8+

用 --allowSyntheticDefaultImports 编译— 添加 "allowSyntheticDefaultImports": true 到 tsconfig.json

注意:虽然将 tsconfig.json 中的 module 设置为 commonjs 时，这对我不起作用.

或者……

改用这个:

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 = 表示。