在客户端和服务器之间共享TypeScript类 [英] Sharing TypeScript classes between client and server

问题描述

我有一个用TypeScript编写的Node.js项目.在我的项目中，我有一个名为"public"的文件夹，其中包含客户端代码& HTML和一个名为classes.ts的文件，应该与服务器端共享.

I have a Node.js project written in TypeScript. In my project, I have a folder named "public" which contains the client side code & HTML and also a file named classes.ts which is supposed to be shared to the server side.

问题是我需要在类声明之前添加导出"，以使其在服务器中可访问，但是随后在浏览器中出现此错误:

The problem is that I need to add "export" before the classes declaration in order to make them accessible in the server, but then in the browser I get this Error:

未捕获的ReferenceError:未定义导出

Uncaught ReferenceError: exports is not defined

我发现了以下问题: https://github.com/Microsoft/TypeScript/issues/5094 ， 设置一个Typescript项目，其类之间共享客户端和服务器应用程序?， 使用TypeScript在客户端和服务器之间共享模块， 建议在服务器中使用commonjs，在客户端中使用amd.这种解决方案的问题在于，他们有3个不同的项目(服务器，客户端和共享)，而我只有一个使用commonjs的项目. 另一个建议是:

I found these questions: https://github.com/Microsoft/TypeScript/issues/5094, Setup a Typescript project with classes shared between client and server apps?, Share module between client and server with TypeScript, which suggests using commonjs in the server but amd in the client. The problem with this solution is that they have 3 different projects (server, client and shared) whereas I only have one project in which I use commonjs. Another suggestion is:

另一个选择，它比较复杂，将需要一个帖子 建立步骤以检查代码；如果您不能在其中使用模块加载器 您的客户端代码是隔离服务器中的所有模块依赖项 代码，然后在共享中，它们只是类.建立共享 没有--module的文件，也没有导出或导入的文件，但是都包含在 单个名称空间，例如名称空间MyApp {...}；在您的客户代码中， 您可以直接包含它们，并使用--out发出.在您的服务器代码中， 您首先将共享代码发送到单个文件shared.js和一个 单个.d.ts shared.d.ts，用一些代码扩展它们以导出它们 作为一个模块，例如在shared.js的末尾附加导出= MyApp 和shared.d.ts，然后从您的服务器代码导入它们.

the other option, which is more convoluted and will require a post build step to massage the code; if you can not use module loaders in your client code, is to isolate all module dependencies in your server code, then in the shared, they are just classes. Build the shared files without --module, and no exports or imports, but all inside a single namespace, say namespace MyApp { ... }; in your client code, you include them directly, and emit using --out. in your server code, you first emit the shared code to a single file, shared.js, and a single .d.ts shared.d.ts, augment these with some code to export them as a module, e.g. append exports = MyApp at the end of your shared.js and shared.d.ts, then import them from your server code.

但是我不想一直处理更新的.d.ts文件，而且我也不确定它是否可以在一个项目中工作.

But I don't want to deal with updating .d.ts files all the time, and I'm also not sure it will work in one project.

关于如何使TypeScript类在浏览器和服务器中均可访问的任何建议?

Any suggestion how to make a TypeScript class accessible both in browser and server?

任何帮助将不胜感激！

推荐答案

这是绝对可能的.

我有一个项目，该项目包含在浏览器中运行的SPA客户端应用程序和在node.js中运行的服务器，两者均共享通用的打字稿类.对于所有这些，我只有一个tsconfig.json文件(我仍然不确定这是否是最好的方法，但是现在它可以正常工作)

I have a project containing both SPA client application that runs in browser and server running in node.js that both share common typescript classes. For all of this I have just one tsconfig.json file (I am still not sure that this is the best approach but for now it works just fine)

这是我设置的一部分:

• 使用模块(以前称为外部模块).您自己的模块不需要名称空间和d.ts文件.
tsconfig中的
• module ="commonjs".
• 在客户端使用System.js作为模块加载器(这将解决您的未捕获的ReferenceError:未定义导出").您可以使用 angular2 5分钟快速入门作为设置system.js的参考.

• Use modules (previously called external modules). No need for namespaces and d.ts files for your own modules.
• module = "commonjs" in tsconfig.
• On client side use System.js as module loader (this will solve your 'Uncaught ReferenceError: exports is not defined'). You can use angular2 5 min quickstart as reference how to setup system.js.

它就像一种魅力.

这篇关于在客户端和服务器之间共享TypeScript类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！