Definitelytyped: React ES6 가져오기 문제

export default react = React; 이 작동할 수 있습니다.

나는 당신이 원하는 것이 import * as React, {Component} from 'react'; 라고 생각합니다.

그래서 저는 최근에 ES6에 꽤 많은 시간을 보냈고 현재 import React from 'react'; 는 기술적으로 유효한 동작이 아니라고 생각합니다. React는 ES6 클래스 모듈을 사용하지 않으므로 기본 내보내기를 지정할 수 없기 때문입니다.

이 구문은 Babel을 사용할 때 작동하지만 기본적으로 Babel이 "CommonJS 모듈을 가져오기 위해 ES6 가져오기를 사용하는 경우 기본 내보내기는 modules.export 와 동일합니다. 그러나 이것은 전적으로 Babel이고 사양의 관점에서 나는 import * as React from 'react'; 가 실제로 정신에 훨씬 가깝다고 말하고 싶습니다(그리고 그것은 즉시 사용 가능한 TypeScript와 함께 작동합니다).

그러나 이것은 완전히 Babel의 것이지 사양의 것이 아닙니다.

동의. 그러나 babel은 _많은_ 매력을 가지고 있으며 사람들은 ES6 모듈이 _반드시_ 작동해야 하는 올바른 방식이라고 믿습니다.

@vvakame 은 babel 유형 가져오기와의 상호 운용성을 원활하게 만들기 위해 몇 가지 작업을 수행했습니다. https://github.com/Microsoft/TypeScript/pull/3586

예, PR이 주로 TypeScript에서 내보내는 것에 관한 것이지만 이 문제는 TypeScript로 가져오는 것에 관한 것입니다. 다시 말해, 그 PR은 이 문제에 도움이 되지 않습니다(그러나 TypeScript로 라이브러리를 빌드하는 데는 확실히 좋습니다!).

나는 Babel이 Facebook에 인수되면서 이 문제가 곧 사라질 것이라고 생각하고 React가 ES6 모듈로 다시 작성되더라도 전혀 놀라지 않을 것입니다.

또는 해당 구문을 _정말__ 사용하려면 선언 파일을 export default React 로 변경할 수 있지만 ES6을 대상으로 한 다음 Babel을 사용하여 CommonJS로 변환해야 합니다. 그렇지 않으면 런타임에 제대로 작동하지 않습니다(TypeScript는 ES6 가져오기를 사용할 때 항상 moduleName.default 로 변환합니다.

명확히 해 주셔서 감사합니다. 간단히 말해서 ts export -> babel import 가 작동합니다. 이제 module.exports aliased to default -> ts import 작업이 필요합니다.

나는 파티에 조금 늦었지만 내가 아는 바에 따르면 이것은 TypeScript 팀의 잘못된 수정 사항입니다.

tl;dr: export default 를 module.exports = 로 번역할 수 없습니다. 대신 import ... = require(...) 레거시 구문을 사용하십시오 :(

ES-6 기본 내보내기는 기본적으로 이름이 'default' 인 일반 내보내기이기 때문에 CJS에서 이에 상응하는 것은 exports.default = 입니다. 가져오기는 CJS var something = require('something').default 에서 다음과 같이 표시됩니다. module.exports = 구문은 모듈을 내보낸 기호 자체와 동일하게 만들어 순환 종속성을 해결할 수 없도록 만들기 때문에 충분하지 않습니다. 이것은 ES6 모듈의 설계에 위배됩니다. IMHO Babel 팀은 이것으로 약간 과장되었습니다 :(

@dreampulse 이 구문을 사용하여 수행하고 있습니다.

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

불행히도 나를 위해 작동하지 않는 @kataras :

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

암호

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

tsconfig.json

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

작동하는 것은 두 가지 가져오기입니다. 처럼:

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

이러한 종류의 가져오기를 허용하는 allowSyntheticDefaultImports 컴파일러 옵션을 사용할 수 있습니다.

import React, {Component} from 'react';

@jbrantly 감사합니다. 에 딱 맞다!!

@ligaz 감사합니다!

참고로 @ligaz 가 언급한 수정 사항이 효과가 있기 전에 "module": "es2015", 를 tsconfig.json 에 추가해야 했습니다.

import React, {Component, PropTypes} from 'react'; 을(를) 사용하고 있는데 Cannot resolve symbol PropTypes 오류가 발생합니다. 이 문제를 해결하는 방법에 대한 포인터가 있습니까?

@kkarmalkar React >=15.5.0을 사용하는 경우 React.PropTypes에서 새로운 prop-types 패키지 및 정의 로 마이그레이션 하고 싶을 것입니다.

굉장합니다, 감사합니다 @corydeppen

나는 allowSyntheticDefaultImports가 있지만 얻을 수 없습니다

import React, {Component} from 'react';

작동하지만 사용

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

잘 작동합니다. 내 모듈을 es5로 설정했습니다. 브라우저용 코드를 컴파일할 때 es6을 사용하는 것이 좋습니까? tsconfig.json의 libs 속성에 es2015를 추가했습니다.

@richtera 관련 가능성: https://github.com/Microsoft/TypeScript/issues/21621

관련이 있습니다, 그렇습니다. 이 스레드에 따르면 그것이 당신에게 효과가 있는지 궁금합니다.

tsconfig 옵션 esModuleInterop: true 을 추가하면 기본 가져오기(예: import React from 'react' )를 사용할 수 있습니다.

webpack을 사용하는 경우 이 설정으로 babel을 버릴 수도 있습니다.

이제 작동합니다. 당시 사용하던 특정 버전의 webpack 및 typescript와 관련이 있는 것 같습니다. Babel 설정은 불행히도 여전히 자바스크립트가 아닌 babel을 사용하는 데 필요합니다.

"allowSyntheticDefaultImports": 참

"module": "es2015
“allowSyntheticDefaultImports”：true

일하고있는 ....

"module": "es2015
“allowSyntheticDefaultImports”：true

일하고있는 ....

이게 트롤이야? :) 마지막 줄에 방향 따옴표가 있고 true 앞에 콜론이 없습니다. 다음과 같아야 합니다.

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

import { default as ProjectInfoProfile } from './ProjectInfoProfile';
또는
'./ProjectInfoProfile'에서 ProjectInfoProfile을 가져옵니다.

이 경우 작동할 수 있습니다.

"모듈": "commonjs",
"대상": "es6",
"esModuleInterop": 참,
"jsx": "반응",
"allowSyntheticDefaultImports": 참