如何将包装在IIFE中的JS文件导入TS

Question

我有一个 TS 文件，我想导入一个包装在 IIFE 中的 JS 库的功能。 该库目前通过在 window object 上设置属性来公开其功能。 如何将此库导入 TS？ 我试过在每个 function 之前添加exports ，但我得到错误file is not a module 。 我应该硬着头皮手动复制代码吗？

为了避免XY问题，我正在做一个网站，前端和后端都有一些他们需要执行的共同功能。 我正在研究使用 TS 的无服务器后端。 如果这是一种反模式，我应该完全做其他事情，我也会接受它作为答案。

Answer 1

我没有找到一种特别优雅的方法来做到这一点，但是通过从匿名 function 返回我需要的特定函数并导出 IIFE 的结果，我得到了我想要的功能。 像这样：

JS 库（我添加了export default和return {... } ）

export default (function () {
    function foo() { ... }
    function bar() { ... }
    function baz() { ... }
    ...

    // the library makes some functions available to the window
    window['baz'] = baz

    // I manually export the functions I need
    return {
        'foo': foo
        'bar': bar
    }
})()

TS 文件：

import lib from './library.js'
lib.bar()

我的tsconfig.json文件中也有"esModuleInterop": true

Answer 2

我通过发布和安装包含库的自定义定义的 NPM package 然后调整 tsconfig.json 以允许它来实现这一点。

1. 在与您的 IIFE library.js 文件相同的目录中创建一个index.d.ts文件
2. 在index.d.ts中，添加一行： declare var libname = require('libname'); 例如：

declare var identikon_cljs = require('identikon_cljs');

3. 将其发布为 npm 组织或用户范围的 package： https://docs.npmjs.com/creating-and-publishing-scopedpublic
4. 在您的项目中安装 package（例如npm i @mpm/identikon --save ）
5. 添加或将以下 compilerOptions 设置为 true 以防止出现 TypeScript 编译错误，指出“环境上下文中不允许使用初始化程序”：

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true
    }
}

6. 在您的组件中导入库，如下所示：

import '@mpm/identikon';

7. 然后，您可以访问库的属性和方法，就好像它已作为模块导出一样。 这是我制定的指令的示例：

import { Directive, ElementRef, Input, } from '@angular/core';
import '@mpm/identikon';

@Directive({
    selector: '[identikon]'
})
export class Identikon {

    @Input() width: number = 64;
    @Input() height: number = 64;
    @Input() set identikon(value: string) {
        if (value) {
            let id = 'identikon-' + value + '-' + new Date().getTime().toString();
            this.el.nativeElement.setAttribute('id', id);
            identikon_cljs.core.make_identikon('#' + id, this.width, this.height, value);
        }
    };

    constructor(private el: ElementRef) { }

}

8. 然后我可以像这样在 Ionic 2/3 项目中轻松绑定它：

<ion-avatar [identikon]="user.avatar" [width]="32" [height]="32" item-end></ion-avatar>