Definitelytyped: Bereaksi masalah impor ES6

export default react = React; mungkin saja berhasil

Saya pikir yang Anda inginkan adalah import * as React, {Component} from 'react'; (tapi saya bisa saja salah, masih mempelajari beberapa hal ini juga :smiley :)

Jadi saya telah menghabiskan cukup banyak waktu dengan ES6 baru-baru ini dan saya percaya bahwa saat ini import React from 'react'; secara teknis _not_ perilaku yang valid karena React tidak menggunakan modul kelas ES6 dan oleh karena itu tidak dapat menentukan ekspor default.

Sintaks ini berfungsi saat menggunakan Babel tetapi itu karena Babel pada dasarnya mengatakan bahwa "jika menggunakan impor ES6 untuk mendapatkan modul CommonJS, ekspor default sama dengan modules.export . Namun, ini sepenuhnya merupakan hal Babel dan bukan hal spek. Dari perspektif spek saya akan mengatakan bahwa import * as React from 'react'; sebenarnya jauh lebih dekat dalam semangat (dan itu bekerja dengan TypeScript out-of-the-box).

Namun, ini sepenuhnya merupakan hal Babel dan bukan hal yang spesifik

Sepakat. Tetapi babel memiliki _banyak_ daya tarik dan orang-orang percaya bahwa itu adalah cara yang benar bahwa modul ES6 _harus_ berperilaku.

@vvakame telah melakukan beberapa pekerjaan untuk membuat interop dengan impor tipe babel lebih lancar: https://github.com/Microsoft/TypeScript/pull/3586

Ya, kecuali bahwa PR terutama tentang mengekspor dari TypeScript, sedangkan masalah ini lebih tentang mengimpor ke TypeScript. Dengan kata lain, PR itu tidak membantu dengan masalah ini (tapi jelas bagus untuk membangun perpustakaan dengan TypeScript!).

Saya menduga masalah ini akan segera hilang karena Babel diakuisisi oleh Facebook dan saya tidak akan terkejut sama sekali jika React ditulis ulang sebagai modul ES6.

Atau, jika Anda _benar-benar_ ingin menggunakan sintaks tersebut, Anda dapat mengubah file deklarasi menjadi export default React tetapi Anda harus menargetkan ES6 dan kemudian menggunakan Babel untuk mentranspile ke CommonJS, jika tidak maka tidak akan berfungsi saat runtime (TypeScript akan selalu transpile ke moduleName.default saat menggunakan impor ES6).

Terima kasih telah mengklarifikasi. Singkatnya, kami memiliki ts export -> babel import yang berfungsi. Sekarang kita perlu module.exports aliased to default -> ts import bekerja.

Saya agak terlambat ke pesta, tetapi dari yang saya tahu, ini adalah perbaikan yang tidak biasa dari tim TypeScript.

tl;dr: Anda tidak dapat menerjemahkan export default menjadi module.exports = . Gunakan sintaks warisan import ... = require(...) sebagai gantinya :(

Karena ekspor default ES-6 pada dasarnya hanya ekspor biasa dengan nama 'default' , yang setara dalam CJS adalah exports.default = . dan impor akan terlihat seperti ini di CJS var something = require('something').default . Sintaks module.exports = tidak cukup karena membuat modul sama dengan simbol yang diekspor itu sendiri, membuat dependensi melingkar tidak mungkin diselesaikan. Ini bertentangan dengan desain modul ES6. IMHO tim Babel sedikit berlebihan dengan ini :(

@dreampulse yang saya lakukan menggunakan syndax ini:

import {default as React,Component} from 'react';

@kataras yang tidak bekerja untuk saya sayangnya:

Error:(2, 9) TS2305: Module '"react"' has no exported member 'default'.

Kode

import {default as React, Component, PropTypes} from 'react';

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "jsx": "react"
  }
}

Apa yang berhasil, adalah memiliki dua impor. Suka:

import * as React from "react";
import { Component } from "react";

Anda dapat menggunakan opsi kompiler allowSyntheticDefaultImports yang memungkinkan impor semacam ini:

import React, {Component} from 'react';

terima kasih @jbrantly. tepat!!

@ligaz terima kasih!

Hanya untuk referensi, saya harus menambahkan "module": "es2015", ke tsconfig.json sebelum perbaikan yang disebutkan oleh @ligaz berhasil untuk saya.

Saya menggunakan import React, {Component, PropTypes} from 'react'; dan mendapatkan kesalahan Cannot resolve symbol PropTypes . Adakah petunjuk tentang cara mengatasi masalah ini?

@kkarmalkar Jika Anda menggunakan React >=15.5.0, Anda ingin bermigrasi dari React.PropTypes ke paket dan definisi prop-types baru.

Luar biasa, terima kasih @corydeppen

Meskipun saya memiliki allowSyntheticDefaultImports, saya tidak bisa mendapatkannya

import React, {Component} from 'react';

untuk bekerja, tetapi menggunakan

import React from 'react';
import {Component} from 'react';

bekerja dengan baik. Saya mengatur modul saya ke es5. Saat menyusun kode untuk browser, apakah disarankan untuk menggunakan es6? Saya menambahkan es2015 ke properti libs saya di tsconfig.json.

@richtera Mungkin terkait dengan?: https://github.com/Microsoft/TypeScript/issues/21621

Ada hubungannya, ya. Ingin tahu bahwa menurut utas ini berfungsi untuk Anda.

Cukup tambahkan opsi tsconfig esModuleInterop: true dan kemudian Anda dapat menggunakan impor default yaitu import React from 'react'

Jika Anda menggunakan webpack, Anda juga dapat membuang babel dengan pengaturan ini.

Ini bekerja sekarang. Saya pikir itu terkait dengan versi webpack dan TypeScript tertentu yang saya gunakan saat itu. Sayangnya, pengaturan Babel masih diperlukan untuk penggunaan non-javascript dari babel.

"allowSyntheticDefaultImports": benar

"module": "es2015
“allowSyntheticDefaultImports”：true

Bekerja ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Bekerja ....

Apakah ini troll? :) Kutipan arah pada baris terakhir, dan itu bukan titik dua sebelum true . Seharusnya sebagai berikut:

  "module": "es2015",
  "allowSyntheticDefaultImports": true

import { default sebagai ProjectInfoProfile } dari './ProjectInfoProfile';
atau
impor ProjectInfoProfile dari './ProjectInfoProfile';

dalam hal ini, mungkin berhasil.

"modul": "umum",
"target": "es6",
"esModuleInterop": benar,
"jsx": "bereaksi",
"allowSyntheticDefaultImports": benar