从 ES5 与 ES6 编写的库中导入 TypeScript

Question

当 运行 转译 依赖于外部库的 TypeScript 代码时出现奇怪的错误

比如Uncaught TypeError: es5_lib_1.default is not a function

怎么了？

Answer 1

ES6 模块规范与描述的 CommonJs 略有不同 Here。这引入了一些在 TypeScript 中有些激怒的兼容性问题。

TypeScript 尝试根据两个输入

猜测转译 import/require 语句的正确方法

• module属性tsconfig.json
• export语句在对应的.d.ts文件中是怎么写的

在tsconfig.json文件中，我们可以设置转译输出将使用的模块格式。例如，module: 'es6'

我们在这里选择的内容会影响 TypeScript 允许的导入语法类型。这也受到相应 .d.ts 形状文件的写入方式的影响。

如果我们从导入一个 CommonJS 库并且我们的输出模块以 CommonJS 为目标，我们必须使用

//tsconfig.json
module: "commonjs"

//.d.ts
declare module 'foo' {
    exports = Foo;
}

// App.ts
import Foo = require('foo');

如果我们从导入一个 CommonJS 库并且我们的输出模块以 ES6 为目标，我们必须使用：

//tsconfig.json
module: "es6"

//.d.ts
declare module 'foo' {
    exports default Foo;
}

// App.ts
import {default as Foo} from 'foo';

如果我们从 ES6 库中导入 ，我们可以使用 import {default ... } 样式而不考虑目标输出模块格式

//tsconfig.json
module: "es6|commonjs"

//.d.ts
declare module 'foo.es6' {
    exports default FooES6;
}

// App.ts
import {default as FooES6} from 'foo.es6';

这对我们从 tsd install 检索的 .d.ts 个文件意味着什么？

根据我们的目标输出，我们可能必须在安装 .d.ts 文件后更改它们以满足我们的需要。大多数 .d.ts 文件是为 commonjs 模块编写的，因此将使用 export = <lib> 样式。但是如果你想以 ES6 输出为目标，你需要像这样编辑它并将其更改为 export default

请根据需要更正此答案