typescriptのモジュール参照

背景
ts node環境やweb環境にも使えます.あるいはes moduleが出る前に、ほとんどのカバンはcomonjsに従っています.これらのcomonjsに従うカバンは今もnodejsとの中に多く存在しています.nodejsがまだ完全にesmをサポートしていない原因です.では、tsはどうやってcomonjsとesmのカバンと互換できますか?
もしあなたがtsを使わない、またはnodejsでtsを使ったことがないなら、ts公式の推薦の書き方を見たら、きっと馬鹿になります.意外にもimportとrequireの混用です.ファイルモジュールの導入です.
cjsとesmを振り返る
私達はtsがなぜこのように独特な推薦の書き方をしているのかを理解して、まずcomonjsとesmに関する知識を振り返ってみます.そしてtsの中で彼らの互換性を考えます.
私たちはcomonjsファイルを持っています.

// my-module.js
module.exports = { foo, bar }

二つの方法が導入されて解凍されていますが、何の違いもないようです.

// index.ts
// cjs
const { foo, bar } = require('my-module')
// esm
import { foo, bar } from 'my-module'

しかし、次のグループを見に来ました.

// module
export const foo = 1
export const bar = 2
export default () => {}

// esm
import { foo } from 'module'
import func from 'module'`

// module
module.exports = {
  foo: 1,
  bar: 2,
  default: () => {}
}
// cjs
const module = require('module')
const foo = module.foo
const func = module.default

ですから、私たちは全部defaultのこのfunctionを使って、comonjsでmodule.defaultを操作しなければなりません.例えば相互操作性を考慮して、reactでは、

import React from 'react'
       default    
const {default: React} = require('react')

したがって2018年までに私たちはtsでReactを導入しました.一致を維持するためにimport * as React from 'react'と書いてmodule.exportのすべての内容を取得します.
したがって、comonjsモジュールを導入する時tsはrequire混在の書き方以外にもimport *の書き方でtypescript-mport-as-v-mport-requireを使ってもいいです.
esModule Interop
ts 2.7は、import d from "cjs" support-for-inmport-d from-from-modules-with-esmodules-esmoduleinteroをサポートするesmodules Interopの構成を出しました.
簡単に見てください.以下のtsはどうやって互換性がありますか?

// common.js
module.exports = {
  default: function greeter(person) {
    return "Hello, " + person;
  },
  person: "common"
};

// esm.js
export default function greeter(person) {
  return "Hello, " + person;
}

export const person = "esm";

// index.ts
import common from "./common";
const common1 = require("./common");
import * as common2 from "./common";

import esm from "./esm";
const esm1 = require("./esm");
import * as esm2 from "./esm";

console.log(common, common1, common2);
console.log(esm, esm1, esm2);

ESModuleInteropはfalseの時にコンパイルされたコードです.

"use strict";
exports.__esModule = true;
var common_1 = require("./common");
var common1 = require("./common");
var common2 = require("./common");
var esm_1 = require("./esm");
var esm1 = require("./esm");
var esm2 = require("./esm");
console.log(common_1["default"], common1, common2);
console.log(esm_1["default"], esm1, esm2);

//[Function: greeter] { default: [Function: greeter], person: 'common' } { default: [Function: greeter], person: 'common' }
//[Function: greeter] { default: [Function: greeter], person: 'esm' } { default: [Function: greeter], person: 'esm' }

import common from "./common"が観測され得る.入力の結果はdefaultだけの方法で、const common1 = require("./common");から出力された結果とは違って、一貫性を維持することができませんでした.これも前に述べたように、私たちがimport *またはimportとrequireを同じところに置く理由です.
esModuleInteropはtrueの時のコンパイルコードです.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
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;
};
exports.__esModule = true;
var common_1 = __importDefault(require("./common"));
var common1 = require("./common");
var common2 = __importStar(require("./common"));
var esm_1 = __importDefault(require("./esm"));
var esm1 = require("./esm");
var esm2 = __importStar(require("./esm"));
console.log(common_1["default"], common1, common2);
console.log(esm_1["default"], esm1, esm2);

//{ default: [Function: greeter], person: 'common' } { default: [Function: greeter], person: 'common' } { default: { default: [Function: greeter], person: 'common' },
  person: 'common' }
//[Function: greeter] { default: [Function: greeter], person: 'esm' } { default: [Function: greeter], person: 'esm' }

esModuleInteropはtrueです.私たちはアユに加入しているのを見ることができます.import Defaultと_uimportStarは、導入されたモジュールがesmモジュールであるかどうかを判断してパッケージ化する.import common from "./common".入力の結果はdefaultの方法だけで、const common1 = require("./common");が出力した結果と一致しています.
なぜtsは直接const common1 = require("./common");方式を勧めないですか?tslentのno-var-requiresにおける説明から、AMdとcomonjs方式のrequireは特定の環境の書き方であり、静的分析が困難であるため、結果を得ることができる.
結び目
1.ts 2.7以降のプロジェクト+esModuleInteropは導入パッケージのいくつかの互換性を考慮する必要はありません.2.ts 2.7の前のプロジェクトでも、importとrequireを混用しない方がいいです.import*を使ってください.esmは最終的に大きな流れになりますので.
参照リンク:
https://stackoverflow.com/que...https://palantir.github.io/ts...
https://jkchao.github.io/type...
https://www.typescriptlang.or...