我应该如何在定义文件中定义全局 TypeScript 变量以便可以导入它？

Question

我有一个带全局参数的外部 JS 库：

function Thing() {  ...  }
...
var thing = new Thing();

有一个TypeScript定义文件，所以在thing.d.ts:

declare var thing: ThingStatic;
export default thing;

export interface ThingStatic {
    functionOnThing(): ThingFoo;
}

export interface ThingFoo {
    ... and so on

然后我将它导入到我自己的 TS 文件中：

import thing from 'thing';
import {ThingFoo} from 'thing';
...
const x:ThingFoo = thing.functionOnThing();

问题是转译为：

const thing_1 = require("thing");
...
thing_1.default.functionOnThing();

这会引发错误。我在another question 中询问过这个问题，建议使用：

import * as thing from 'thing';

这并不能解决问题 - 它在 TS 中给了我thing.default，但是一旦转译为 JS，它就没有定义了。

我认为thing.d.ts 有问题 - 必须有一种方法来定义可以导入的类型化全局参数。

我应该如何编写 thing.d.ts 以便它正确地表示 JS 并且不会转换为包含 default 或其他实际不存在的属性？

Answer 1

如果使用该库的唯一方法是访问其全局变量（而不是将其作为节点模块或 amd 或 umd 模块导入），那么最简单的方法是在没有任何 exports 的声明文件顶层。只需声明一个变量就足够了。要使用它，您必须在编译您的打字稿代码时包含该声明文件，或者通过将其添加到tsconfig.json 中的files 或include，或者直接在命令行上。您还必须在运行时包含带有 <script> 标记的库。

示例：thing.d.ts

declare var thing: ThingStatic;

declare interface ThingStatic {
    functionOnThing(): ThingFoo;
}

declare interface ThingFoo {
}

test-thing.ts

const x:ThingFoo = thing.functionOnThing();

可以一起编译

./node_modules/.bin/tsc test-thing.ts thing.d.ts

test-thing.js 中的结果：

var x = thing.functionOnThing();

另请参阅 this question 了解环境声明。

注意：有些模块加载器允许像使用模块一样使用全局库，因此可以使用 import 语句而不是 <script> 标记，但是如何配置这些模块加载器来做到这一点是另一回事，更复杂的问题。