如何实现Typescript中内置模块导入的多种兼容方式？

本文共计1116个文字，预计阅读时间需要5分钟。

一、前言及模块化规范概述包括：CommonJS、AMD、CMD 和 ES6。其中，AMD 和 CMD 可谓是过渡期的产物，目前较为常见的是 CommonJS 和 ES6。在 TypeScript（TS）中，这两种模块化方案常被混合使用，有时会出现一些意想不到的情况。

一、前言

前端的模块化规范包括 commonJS、AMD、CMD 和 ES6。其中 AMD 和 CMD 可以说是过渡期的产物，目前较为常见的是commonJS 和 ES6。在 TS 中这两种模块化方案的混用，往往会出现一些意想不到的问题。

二、import * as

考虑到兼容性，我们一般会将代码编译为 es5 标准，于是 tsconfig.json 会有以下配置：

{ "compilerOptions": { "module": "commonjs", "target": "es5", } }

代码编译后最终会以 commonJS 的形式输出。
使用 React 的时候，这种写法 import React from "react" 会收到一个莫名其妙的报错：

Module "react" has no default export

这时候你只能把代码改成这样：import * as React from "react"。
究其原因，React 是以 commonJS 的规范导出的，而 import React from "react" 这种写法会去找 React 模块中的 exports.default，而 React 并没有导出这个属性，于是就报了如上错误。