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

Question

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

我遇到的问题是编译器说模块文件不是模块

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

我也将 webpack 与 ts-loader 一起使用，但单独使用 (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 已经完成）。

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

How can self made ambient modules be created and imported in typescript?

typescript

webpack

ts-loader