문제 설명

CommonJS 모듈을 ES6 모듈 코드베이스로 가져 오려고 할 때 문제가 발생합니다.

이 플래그 이전에는 별표 ( * as something) 가져 오기를 사용 하여 CommonJS 모듈을 가져와야했습니다.

// node_modules/moment/index.js
exports = moment

// index.ts file in our app
import * as moment from 'moment'
moment(); // not compliant with es6 module spec

// transpiled js (simplified):
const moment = require("moment");
moment();

우리는 그것이 *어떻게 든 exports변수 와 동등 하다는 것을 알 수 있습니다 . 잘 작동했지만 es6 모듈 사양과 호환되지 않았습니다. 사양에서 스타 가져 오기 ( moment이 경우)의 네임 스페이스 레코드는 호출 할 수없는 일반 개체 일 수 있습니다 ( moment()허용되지 않음).

해결책

플래그 esModuleInterop를 사용하면 es6모듈 사양 에 따라 CommonJS 모듈을 가져올 수 있습니다 . 이제 가져 오기 코드는 다음과 같습니다.

// index.ts file in our app
import moment from 'moment'
moment(); // compliant with es6 module spec

// transpiled js with esModuleInterop (simplified):
const moment = __importDefault(require('moment'));
moment.default();

작동하며 es6 모듈 사양에서 완벽하게 유효합니다. moment스타 가져 오기의 네임 스페이스가 아니기 때문에 기본 가져 오기입니다.

하지만 어떻게 작동합니까? 보시다시피 기본 가져 오기를 수행했기 때문에 개체 default에 대한 속성을 호출 moment합니다. 그러나 우리는 순간 라이브러리 default에서 exports객체에 대한 어떤 속성도 선언하지 않았습니다 . 열쇠는 __importDefault기능 에 있습니다. CommonJS 모듈의 속성에 모듈 ( exports)을 할당 default합니다.

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

보시다시피 es6 모듈을 그대로 가져 오지만 CommonJS 모듈은 default키가있는 객체로 래핑됩니다 . 이렇게하면 CommonJS 모듈에서 기본값을 가져올 수 있습니다.

__importStar유사한 작업을 수행합니다-손대지 않은 esModules를 반환하지만 CommonJS 모듈을 default속성이있는 모듈로 변환 합니다.

// index.ts file in our app
import * as moment from 'moment'

// transpiled js with esModuleInterop (simplified):
const moment = __importStar(require("moment"));
// note that "moment" is now uncallable - ts will report error!

var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};

합성 수입품

그리고 무엇에 대한 allowSyntheticDefaultImports, 그것은 무엇인가? 이제 문서가 명확해야합니다.

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

에서 momenttypings 우리는 지정된 기본 내보내기를 가지고 있지 않으며, 단지 플래그와 함께 사용할 수 beacuse 우리가하지 말았어야 esModuleInterop합니다. 따라서 allowSyntheticDefaultImports기본 내보내기가없는 타사 모듈에서 기본값을 가져 오려는 경우 오류를보고하지 않습니다.

답변

//ts 
import React from 'react'
//js 
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));

// ts
import * as React from 'react'

// emitted js
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));