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

Question

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

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

怎么了？

Answer 1

ES6模块规范与CommonJ略有不同，描述为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';

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

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

请根据需要提供对此答案的更正