在Typescript Express项目中使用Clientside Javascript

Question

我总是想知道如何在我的快递项目中正确添加客户端javascript。我使用Typescript，我也想在编写我的客户端javascripts时利用Typescript类型（例如jquery）。

我的项目结构如下所示：

• 根
  • DIST
  • SRC
    • 助手
    • 模型
    • 登记
      • router.ts
      • form.pug
    • 简档
      • router.ts
      • profile.pug
  • wwwroot的
    • CSS
    • JS​​
    • 图像

直到今天我做了什么：

我在wwwroot/js中创建了所有客户端javascript文件（例如jquery.min.js，registration-form.js），然后将它们加载到相应页面的标题中。

缺点：

1. 我必须编写与我们想要支持的浏览器兼容的ES5 javascript
2. 我无法将javascript文件放在他们逻辑上属于的地方（例如，我将registration-form.js放入src/registration/而不是wwwroot）
3. 没有打字稿可能:(。没有打字稿类型，没有转换到ES5等。

在一些教程中，我看到他们只需运行npm install --save jquery并将其导入客户端文件中。所以我觉得我一定错过了一些非常重要的东西，但是我找不到任何关于它的教程。

我的问题：

＆＃34;正确的方式/最佳实践＆＃34;在Typescript / Express应用程序中编写客户端javascript（这也应该消除上述缺点）？

Answer 1

在客户端使用TypeScript与服务器端没有太大区别。

以下是您可以做的事情：

• 为客户端打字稿来源创建client文件夹
• 将tsconfig.json放入client文件夹并将其配置为生成“es5”代码（目标：es5）
• 安装jquery类型（npm install --save-dev @ types / jquery）

就是这样，现在您可以在TypeScript中编写客户端代码了。

您可以使用tsc -p ./src编译服务器端代码（在src下具有服务器端tsconfig.json）并使用tsc -p ./client编译客户端代码。

我做了一个这样的应用程序的简单示例，check it here。我将简单的脚本构建到package.json中，因此您可以运行npm run-script complie以将服务器和客户端代码都编译到/dist文件夹中。然后使用npm start运行它。

进一步的步骤：

• 自动化流程：您应该能够在本地启动应用程序，然后只需编辑源TypeScript文件，应该自动重新加载应用程序。这可以通过webpack / gulp / grunt或自定义shell脚本完成，一旦您的任何源文件被更改和保存，就可以触发。
• 如果您发现自己编写了大量客户端代码，请同时检查angular（https://angular.io/docs）。它使用TypeScript作为客户端开发的首选语言，您将能够使用它构建功能更强大的客户端应用程序。您也可以选择其他库（react，vue.js等），请参阅examples on the TypeScript site。

Answer 2

客户端打字稿与快递无关。

Express仅适用于服务器端（即使您在电子上使用它，它仍然是服务器，而不是客户端）并且它并不真正关心客户端代码。

您使用的任何客户端框架 - set express将dist文件夹作为静态文件提供，或者直接由任何Web服务器（apache / nginx / IIS）提供