如何在 typescript 中创建和导入自制环境模块？

Question

我有一个在窗口中创建全局对象的外部 javascript 库。 为了在 typescript 代码中使用这个对象，我创建了一个环境模块文件 (d.ts)，它被导入到其他 typescript 文件中。

我面临的问题是编译器说模块文件不是模块

src/App.ts(6,22): error TS2306: File '/Users/user/ts-problems/src/abc.d.ts' is not a module.

我也在使用带有 ts-loader 的 webpack，但单独使用 (tsc) 编译它会得到相同的结果。

这是 abc.d.ts 环境模块文件

declare module "abc" {
    export interface Greeter {
        sayHello(): void;
    }
    export var abc: Greeter;
}

这是 App.ts 文件：

import * as abc from "./abc";


class App {
    static sayGoodbye() {
        console.log("goodbye from App.ts");
    }
}

abc.abc.sayHello();
App.sayGoodbye();

测试项目可在https://github.com/daneilsan/ts-module-problem 获得

任何帮助将不胜感激，因为我不知道还能做什么

Answer 1

文件abc.d.ts 在顶层没有任何export 或imprort 语句，因此它不是模块，不能与相对导入一起使用。也就是说，

import ...some stuff... from "./abc";

失败。

但是，tsconfig.json 中没有 files、include 或 exclude，因此默认情况下，任何带有 *.ts 或 *.d.ts 扩展名的文件都包含在编译中。

这意味着包含abc.d.ts，因此不需要///reference，编译器可以看到其中的所有声明，尤其是这个：

declare module "abc" {
    ... stuff exported here
}

这意味着你可以使用这个导入

import * as abc from "abc";

获取进口的东西。它将以abc.Greeter 和abc.abc 的形式提供。

这个表格

import {Greeter, abc} from "abc";

也可以，使Greeter 和abc 直接可用，而不是abc 范围的属性。

简而言之：要使事情正常进行，import 语句中的模块名称必须与declare module 语句（"abc"）中的拼写方式完全相同，并且包含declare module 的文件必须是包含在编译中（默认情况下已经使用您的tscontig 完成）。