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模块导入），那么最简单的方法是使用一个没有任何export的声明文件在顶层。只是声明一个变量就足够了。要使用它，您必须在编译打字稿代码时包含该声明文件，方法是将其添加到files中的include或tsconfig.json，或直接在命令行中。您还必须在运行时将库包含<script>标记。

示例： thing.d.ts

declare var thing: ThingStatic;

declare interface ThingStatic {
    functionOnThing(): ThingFoo;
}

declare interface ThingFoo {
}

<强>测试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>标记，但是如何配置这些模块加载器到这是另一个更复杂的问题。

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

1 个答案: