导入任何 .d.ts 都会导致运行时错误

Question

我在 TypeScript 中缺少一些简单的东西......

使用 Chrome 运行我的代码，我有一个工作的打字稿环境，我的所有其他代码/模块都按预期工作。

当我从 .d.ts 导入时，所有内容都编译时没有错误/警告，但我在 Chrome 中遇到运行时错误，因为生成的 JavaScript 正在尝试从不存在的文件导入。

import { doSomething } from "exampleJsLibrary";

在浏览器中失败，因为 TypeScript 不会将 exampleJsLibrary.d.ts 转换为 JS 文件。

我的目标是 es5，使用 es6 模块输出，并使用 tsc 构建（没有 webpack/browserify 工具），ts 2.7.2。

完整示例：

<!DOCTYPE html>
<html>
    <head>
    <script>
            var exampleJsLibrary = (function() {
                return {
                    doSomething: function(x) { return x + 1 }
                }
            })()
    </script>
    <script type="module" src="./built/myCode.js"></script>
    </head>
    <body>
    </body>
</html>

和

// exampleJsLibrary.d.ts
export const doSomething(x: number): number;
export as namespace exampleJsLibrary;


// myCode.ts
import { doSomething } from "./exampleJsLibrary";
function test() {
    console.log(doSomething(3));
}

// tsconfig.json
...
        "target": "es5",
        "lib": ["dom", "es5", "es2015.iterable", "es2015"],
        "outDir": "built",
        "module": "es6"
...

失败是因为为 myCode.js 生成的代码 还有import { doSomething } from "./exampleJsLibrary"这行， 这会导致运行时错误，因为没有 exampleJsLibrary 或 exampleJsLibrary.js。 如果我将生成的 JS 中的那一行替换为 var doSomething = exampleJsLibrary.doSomething，一切正常。

如何从 .d.ts 导入？

Answer 1

.d.ts declaration files 只包含类型声明，而不是实际代码。 （它们就像 C/C++ 中的头文件，如果您碰巧熟悉的话。）您需要在项目中包含实际的库代码，然后将其导入或全局定义以使其在运行时工作.

在您的情况下，由于库代码作为全局包含在页面中，因此您不需要使用import。相反，您可以说：

const doSomething = exampleJsLibrary.doSomething

如果编译器抱怨 exampleJsLibrary 未定义，最简单的解决方法是将其添加到文件顶部（使用 .d.ts 的实际相对路径）：

/// <reference path="path/to/exampleJsLibrary" />

（请注意，如果您的包是从 npm 中包含的，则方法会有所不同，这很常见。）