Migrieren von React ES6 zu TypeScript: Importanweisungen funktionieren nicht

Question

Ich habe ein React-Projekt, das derzeit in ES6 geschrieben ist, das ich nach TypeScript migriere. Ich habe Probleme mit den import Aussagen.

Derzeit mit ES6 Ich installierte React Abhängigkeiten mit NPM, ex npm install react, und verwenden Sie Babel mit Browserify, um ein Ausgabe ES5-Bundle zu erstellen. (Browserify Verwendung ist keine Voraussetzung, ich versuche nur, um TS mit dem Projekt arbeiten.)

Eine typische Reaktion ES6 Datei sieht wie folgt aus:

import React from "react" 
import {Router, Route, Link} from "react-router" 
import Button from "./components/Button" 

export default class App extends React.Component { 
    render(){ 
     // ... 
    } 
} 

Umzug in TS, ich installiert haben d.ts Dateien für meine alle Abhängigkeiten Reagieren tsd install react/ verwenden, stellen TSC module: "commonjs" und jsx: "react", konvertiert ein paar Dateien *.jsx-*.tsx, und ich bekomme diese Fehler auf den import Aussagen kompilieren:

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

Die import Button Anweisung gibt keinen Fehler. Es scheint, dass TSC die Abhängigkeiten des NPM-Moduls nicht auflösen kann.

Wie kann ich das zum Funktionieren bringen?

Answer 1

Typoskript 1.8+

Compile mit --allowSyntheticDefaultImports -add "allowSyntheticDefaultImports": true-tsconfig.json

Hinweis: dies für mich nicht funktioniert, wenn module in tsconfig.json Einstellung zu commonjs obwohl.

Alternativ ...

Verwenden Sie stattdessen:

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

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

Lesen Sie mehr here und here. Derzeit react.d.ts verwendet export = und so müssen Sie es importieren, indem Sie import * as React tun.

Grundsätzlich haben diese Bibliotheken nur einen Export. Das steht in der Definitionsdatei mit export =.