Question

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

目前使用ES6我使用NPM安装了React依赖项，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/为我的所有React依赖项安装了d.ts个文件，设置了TSC module: "commonjs"和jsx: "react"，从{{转换了一些文件1}}到*.jsx，我在*.tsx语句中得到了这些编译错误：

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

import语句没有错误。似乎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 =在定义文件中表示。

Answer 2

为了使用以下语法：

import React from 'react';

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

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

经过以下版本测试：
打字稿2.9.2
@ types / react 16.4.7
反应16.4.1

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

2 个答案: