在没有 TypeScript Transpiler 的情况下使用 Angular 2

Posted 2023-02-22

【中文标题】在没有 TypeScript Transpiler 的情况下使用 Angular 2

【英文标题】：Using Angular 2 without TypeScript Transpiler

【发布时间】：2016-05-15 18:03:44

【问题描述】：

我想学习 Angular 2 并将我的应用程序切换为使用它，但是，我在使用 TypeScript 时遇到了问题。

在我当前的环境中，我无法使用转译器/编译器。我目前只需要运行 node.js 可执行文件（node.exe），而不是完整的 node.js 应用程序，也不是 npm。 Angular 2 是用 TypeScript 编写的，因此在发送到浏览器之前需要将其编译为 javascript。

有没有办法获得 Angular 2 的预编译版本，这样我就可以用 JavaScript 编写并在没有编译器的情况下运行？

如果没有，有什么方法可以手动安装和使用仅带有 node.exe 可执行文件的 TypeScript 编译器？

要明确，这不是因为我不想使用 TypeScript，而是因为在我目前的情况下我无法安装它。

【问题讨论】：

Is it possible to use ES5 JavaScript with Angular 2 instead of TypeScript?的可能重复

【参考方案1】：

Angular2 在 TypeScript、JavaScript 和 Dart 中可用。无需使用 TypeScript。

见 - https://angular.io/docs/js/latest/index.html - http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html - http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

另见Is it possible to use ES5 JavaScript with Angular 2 instead of TypeScript?

<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.umd.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-all.umd.dev.js"></script>

【讨论】：

我不是在谈论我在谈论 angular 2 本身中写的代码，如果你看一下它在 typescript 中编写的 angular 2 beta，所以即使我不必使用它也需要 typescript 来运行打字稿

不，它是用 TypeScript 编写的。 JS 和 Dart 版本是从 TypeScript 自动生成的，它们在 JS 和 Dart 源中可用。

JS源码在哪里？我在任何地方都找不到它

没有人提到即使你在技术上可以用纯 javascript 编写 Angular 2 应用程序，但这是一个巨大的麻烦，因为没有装饰器，你最终花费更多的时间来破解和弄清楚如何做事开发您的实际应用程序。更不用说（仍然）缺少 JS 文档……如果您制作 Angular 2 应用程序，我会坚持使用 TypeScript。如果你想使用 JavaScript，可能最好坚持使用 Angular 1 或其他框架，如 Vue。

@AdamReis 我不确定这是否正确。看起来 Typescript 和 Javascript (ECMScript6) 都支持和使用装饰器。 （也许在 2017 年您编写 cmets 时并非如此）。见joshmorony.com/ionic-2-typescript-vs-ecmascript-6

【参考方案2】：

如果你想使用 TypeScript 来编写你的应用程序，你需要一个转译器：

静态。例如，在后台运行 tsc -w 命令 在运行中。直接在浏览器中使用 typescript.js 文件

也就是说只能使用 ES5 编写 Angular2 应用程序。这是一个示例：

http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

编辑

当您从 Angular2（文件夹 node_modules/angular2/bundles）中包含这些 JavaScript 文件时，TypeScript 就没有了：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

这些文件被转译成 JavaScript。所以没有必要有 TypeScript。有了它们，你可以只用 ES6 来实现你的应用程序。

要仅使用 ES5，您需要包含以下内容：

<script src="node_modules/angular2/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.dev.js"></script> 

【讨论】：

是的，我会告诉 OP 至少试一试，TypeScript 让它变得容易得多，因为 IDE 会自动为您完成

我的问题是 angular 2 是用 typescript 编写的，所以我不能使用 angular，因为我无法安装 typescript。如果我可以安装打字稿，我会

是的，Angular2 是用 TypeScript 编写的，但是当你包含相应的捆绑 JavaScript 文件时，你不需要 TypeScript，因为它们被编译成 ES5