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。如果我用var doSomething = exampleJsLibrary.doSomething替换生成的JS中的那一行，一切正常。

如何从.d.ts导入？

Answer 1

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

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

const doSomething = exampleJsLibrary.doSomething

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

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

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

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

1 个答案: