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

我有一个TS文件，我想导入一个封装在IIFE中的JS库的功能。库当前通过设置窗口对象的属性来公开其功能。如何将此库导入TS？我尝试在每个函数之前添加

导出

，但我得到错误

文件不是模块

。我应该咬紧牙关手动复制代码吗

---

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

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

JS库（我添加了

导出默认值

和

返回{…}

）

TS文件：

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

---

在我的

tsconfig.json

文件中也有

“esModuleInterop”：true

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

在IIFE library.js文件所在的目录中创建一个

index.d.ts

文件

在

index.d.ts

中，添加一行：

declare var libname=require（'libname'）
例如：

将其发布为npm组织或用户范围的包：

在项目中安装软件包（例如，

npm i@mpm/identikon--save

）

添加以下编译器选项或将其设置为true，以防止出现TypeScript编译错误，该错误声明“环境上下文中不允许使用初始值设定项”：

在组件中导入库，如下所示：

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

然后我可以轻松地将其绑定到Ionic 2/3项目中，如下所示：

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

declare var identikon_cljs = require('identikon_cljs');

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

import '@mpm/identikon';

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) { }

}

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