在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(例如jquery.min.js,registration-form.js)中创建了所有客户端的javascript文件,并将它们加载到相应页面的标题中.

缺点:

1. 我不得不写ES5 javascript,它与我们想要支持的浏览器兼容
2. 我无法将javascript文件放在它们逻辑上所属的位置(例如,我宁愿把我的文件registration-form.js放到src/registration/wwwroot中)
3. 没有打字稿可能:(.没有打字稿类型,没有转换到ES5等.

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

我的问题:

在Typescript/Express应用程序中编写客户端javascript的"正确方法/最佳实践"是什么(这也应该消除上述缺点)？

Answer 1

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

您可以执行以下操作：

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

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

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

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

进一步的步骤：

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