Typescript Express 项目中的客户端 Javascript

Posted 2023-03-13

【中文标题】Typescript Express 项目中的客户端 Javascript

【英文标题】：Clientside Javascript in Typescript Express projects

【发布时间】：2018-04-18 02:40:33

【问题描述】：

我一直想知道如何在我的 express 项目中正确添加客户端 javascript。我使用 Typescript，并且我还想在编写客户端 javascripts 时利用 Typescript 类型（例如 jquery）。

我的项目结构如下所示：

根 分布 源 帮手 型号 注册 router.ts form.pug 简介 router.ts profile.pug wwwroot CSS js 图片

到今天为止我做了什么：

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

缺点：

我必须编写与我们希望支持的浏览器兼容的 ES5 javascript 我无法将 javascript 文件放在它们在逻辑上属于的位置（例如，我宁愿将我的 registration-form.js 放入 src/registration/ 而不是 wwwroot） 没有 Typescript 可能 :(。没有 typescript 类型，没有转译到 ES5 等。

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

我的问题：

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

【问题讨论】：

这个页面从极端基础开始，但他进入了关于在 node express 应用程序中使用 Typescript 的部分。您可能会发现它很有用。 brianflove.com/2016/11/08/typescript-2-express-node

@ChrisSharp 那篇文章根本没有回答我的问题，因为他没有实现单行客户端 javascript。这就是整个问题的意义所在。

【参考方案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。