Миграция React ES6 в TypeScript: операторы импорта не работают

у меня есть проект React, написанный в настоящее время в ES6, который я переношу на TypeScript. У меня проблемы с import заявления.

в настоящее время с ES6 я установил зависимости React с помощью 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, Я установил d.ts файлы для всех моих зависимостей React с помощью tsd install react/, установить TSC module: "commonjs" и jsx: "react", конвертировать несколько файлов из *.jsx to *.tsx, и я получаю эти ошибки компиляции на import отчетность:

Ошибка: (1, 8) TS1192: модуль"react" не имеет экспорта по умолчанию.

на import Button заявление не дает никакой ошибки. Кажется, TSC не может разрешить зависимости модуля NPM.

как я могу получить это работа?

10
definitelytyped ecmascript-6 reactjs typescript

2 ответов

TypeScript 1.8+

компилировать с --allowSyntheticDefaultImports-добавить "allowSyntheticDefaultImports": true to tsconfig.в JSON

Примечание: это не работает для меня, когда параметр module на tsconfig.в JSON to 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 =.

20

чтобы использовать следующий синтаксис:

import React from 'react';

вам нужно установить эти два флага в tsconfig.json:

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

протестировано со следующими версиями:
Typescript 2.9.2
@types / react 16.4.7
реагировать 16.4.1

1