将React ES6迁移到TypeScript：导入语句不起作用

小编典典

将React ES6迁移到TypeScript：导入语句不起作用

reactjs

我有一个当前用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"和将所有React依赖项安装了文件jsx: "react"，并将一些文件从转换*.jsx为*.tsx，然后在import语句中得到以下编译错误：

错误：（1，8）TS1192：模块’“ react”’没有默认导出。

该import Button语句没有错误。看来TSC无法解决NPM模块依赖性。

我怎样才能使它工作？

阅读 358

2020-07-22

共1个答案

小编典典

TypeScript 1.8+

编译为—
--allowSyntheticDefaultImports添加"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 =。

2020-07-22