时间戳

首页 > 解决方案 > 如何从另一个文件打字稿中导入打字数据和功能？

typescript - 如何从另一个文件打字稿中导入打字数据和功能？

问题描述

我有 2 个文件sketch.ts和lib.ts.

现在我正在使用 library p5.js，它的独特之处在于它是一个画布库，您可以在其中定义诸如 mouseClicked 或 preLoad 之类的函数，并且该库使用这些函数并在该事件触发时运行它们。这样做的问题是，如果函数没有在这些事件触发它们不运行时定义。这个设置在一个文件中运行良好，但在一个文件中变得相当混乱，所以我决定将一些东西移到第二个文件中。

第二个文件lib.ts的结构是一个命名空间，其中包含其他包含接口或函数的命名空间。例如

namespace lib{
    export namespace types{
    export interface example{
    //data
    }
    //more interfaces
    }
    export namespace functions{
    //functions
    }

}
export default lib;

现在解决问题，How do you import both typing data and functions from another file? 目前我正在工作

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
    <script type="module" async src="./dist/lib.js"></script>
    <script src="./dist/sketch.js"></script>

在 lib.ts 我有

declare global{
   export namespace types{
   export interface example{
   //data
   }
}
}
namespace functions{
   //functions
   }

declare global {
   interface Window { functions: typeof functions; }
}
window.functions = functions;

连同一个/// <reference path="./lib.ts"/>在sketch.ts 中。

我有 2 个导出，一个带有输入数据，一个带有函数。有没有更好的方法来实现这一目标？

我尝试使用 import 语句从 sketch.ts 导入 lib.ts ，但这需要设置type="module"这<script src="sketch.ts">会弄乱执行顺序，从而弄乱 p5 库。

我也已阅读并尝试理解https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6，但无法实施更好的方法。

标签： typescriptp5.js

解决方案

首先，我认为您最好使用捆绑器（例如Webpack或Browserify）来编译您的 Typescript 模块及其依赖项。这将允许您使用 Node.js 模块和 ES6 导入语句，而不是 Typescript 命名空间和/// <reference />标签。有关此差异的更多信息，请参阅Typescript 手册中的这篇文章。

看起来您目前正在混合使用 Typescript 命名空间和模块，并且可能将您的.ts文件编译成单独的.js模块。这在理论上可行，假设目标 Web 浏览器支持 ES6 模块，但是无法导入p5.js为 ES6 模块。打包器喜欢Webpack并且Browserify可以import p5 from 'p5';工作的原因是因为它们还支持早于 ES6 的其他模块格式。

如果您绝对不想使用捆绑器，而只是使用 Typescript 编译器进行编译，那么您可以 /// <reference />专门使用 Typescript 命名空间和标签（无模块）。然后使用类似tsc --outFile compiled.js main.ts. 这将允许您像普通脚本（而不是模块）一样包含生成的 javascript。您似乎缺少的最后一件事是p5.js的类型声明文件。确实存在一个 npm 包，@types/p5其中包含 p5.js 的声明，但它似乎只适用于 ES6 样式导入，而不适用于/// <reference />标签。好消息是我能够进行一些修改以使其正常工作。这是 GitHub 中的一个简单示例，以及Replit.com 上的实时实例

推荐阅读