Migrazione di React ES6 a TypeScript: le istruzioni di importazione non funzionano

Question

Ho un progetto React attualmente scritto in ES6 che sto migrando a TypeScript. Ho problemi con le istruzioni import.

Attualmente con ES6 ho installato le dipendenze React utilizzando NPM, ex npm install react e uso Babel con Browserify per creare un pacchetto ES5 di output. (Usando Browserify non è un requisito, sto solo cercando di ottenere TS lavorare con il progetto.)

Un tipico file di Reagire ES6 è simile al seguente:

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

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

Entrando nel TS, ho installato d.ts file per tutti i miei dipendenze Reagire utilizzando tsd install react/, impostare TSC module: "commonjs" e jsx: "react", convertiti alcuni file *.jsx-*.tsx, e ottengo questi errori di compilazione sui import dichiarazioni:

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

L'istruzione import Button non dà errori. Sembra che TSC non sia in grado di risolvere le dipendenze del modulo NPM.

Come posso farlo funzionare?

Answer 1

dattiloscritto 1.8+

Compila con --allowSyntheticDefaultImports -add "allowSyntheticDefaultImports": true-tsconfig.json

Nota: questo non funziona per me quando l'impostazione module in tsconfig.json a commonjs però.

alternativa ...

Utilizzare questo invece:

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

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

Leggi tutto here e here. Attualmente react.d.ts utilizza export = e quindi è necessario importarlo facendo import * as React.

Fondamentalmente queste librerie hanno solo un'esportazione. Questo è rappresentato nel file di definizione con export =.