angular 和 typescript 到底是否適合最佳實踐？

01-21

我發現angular2開始使用ts，可是我嘗試在angular使用ts，發現特別麻煩，還不如不添加，那麼到底是否能構成最佳實踐呢？

首先，還是提示一下，Angular 2 的項目是可以自由使用 TypeScript、ES 6 和 ES 5 的，並不是因為 Angular 2 本身用 TypeScript 開發就必須要用 TypeScript 來使用的。

然後，認真想一想，Angular 2 的「麻煩」真的來自於 TypeScript 嗎？下面是我猜的幾個「麻煩」的地方。

1. 組件化

2.0 相對於 1.x 的一個重要區別是強制組件化。1.x 的時候可以創建脫離 Directive 的 Controller，在簡單程序中非常方便，所以很多人在 1.x 的時候本來就不是按照最佳實踐來做的，甚至很多人不知道 Angular 1.x 也可以組件化。當你的 Angular 1.x 中沒有 ngController 時，你還會對 Angular 2 的組件化不習慣么？

Angular 1.x 中，Controller 本身也就只是一個初始化器而已，執行了一次之後就只是一個閉包容器。如果 1.x 按照最佳實踐來，你就會發現 Controller 只是 Directive 或者 View 中的一個初始化函數而已。在 Angular 2 中，這個初始化函數仍然是存在的，如果是用 TypeScript 的話，就是類的構造函數（相當於把 link 和 controller 合併了），只是不再使用 Controller 這個誤導性的關鍵字而已了。

另外，Angular 1.2 就已經引入了 Controller As 語法，並不需要以 Scope 來作為 ViewModel 了，用 Scope 來做 ViewModel 在 1.x 裡面本身就已經不是最佳實踐了（而且容易發生名稱污染）。而且在完全組件化之後，已經不需要通過 Scope 來構造一個層次結構了，Scope 的事件傳遞機制（emit、broadcast、on）可以直接置於 Component 上，所以 Scope 存在的必要基本沒有了。但如果你了解這個 hierarchy 的作用，你會發現這個 hierarchy 還是存在的。

2. 響應式

Angular 2 的很多實現都基於 RxJS，也就是 Reactive Extension 的 JavaScript 實現。對於還在用 Callback 和 Promise 的童鞋來說，要直接跳到 RxJS 上確實可能需要一定的學習成本。

但是，這個學習成本並不在 Angular 上面，基於事件流的響應式編程（ReactiveCocoa 中貌似叫信號流）可以看成是一種編程范型，目前來說也是一種潮流和趨勢。

RxJS 並不是 Angular 2 中的，在任何前端框架或者沒有框架的情況下都可以正常使用。對於熟悉 RxJS 的人來說，在 Angular 2 中可以感受到一種強烈的親切感和由此帶來的巨大的開發效率提升。

對於只是把 RxJS（or RxWhatever）只是當成回調的另一種方式的人來說，除了語法更複雜之外並沒有其他什麼不同。所以如果題主不甚了解 Rx 的話，建議先行（或另行，也就是時間上並行）了解 Rx，重點在理念而不是用法。

3. 面向對象

對於長期把 JavaScript 當腳本語言來用的人來說，可能會很不習慣各種類、介面的先定義後使用，各種繼承與實現等，覺得這是生產力的倒退。

但其實面向對象仍然是使用非常廣泛的一種范型，在隨著程序複雜度的增加還是有無可比擬的優勢，特別對於 UI 程序來說是非常常用也非常實用的一種范型。另一方面，也希望題主不要把 JavaScript 只是看成一種網頁腳本，對於組件化的 Web App 來說，JavaScript 和 Java、Objective-C/Swift 一樣是一種程序開發語言。

4. 顯式類型

TypeScript 其實並沒有這個要求，可以標註 any 或者留空（隱式 any）。但實際上靜態類型具有很大的優勢，不論是開發效率（IDE 提示、編譯時檢查）還是執行效率（目前 ts 還是要編譯到 js 所以暫時不存在）。另外 TypeScript 也有強大的類型推理功能，對於局部邏輯來說，並不需要手動設定類型信息。

5. 標註/裝飾器

這個確實可以勉強算 Angular 的坑，不過大體上也就改變了一下 token 的位置而已（比如 angular.directive(xxx) 變成 @Directive xxx），並木有引入什麼本質上的新東西。另外也和第一句一樣可以用不帶 Annotation/Decorator 的形式來開發。

6. 模塊化

實際上 Angular 2 的模塊化才是標準的 ECMAScript 的模塊化，只是因為 ES2015 來得太晚，大家都搞出來了很多自己的模塊化方式而已。另外，由於 ES2015 的全面普及實現還需要時間，所以需要 System.js 這樣的臨時方案來做相應的 Polyfill。

總結起來就是，Angular 2 的才是正統的模塊化方式，其他的方式才是坑。（雖然我也覺得說得好無力）

7. Transpile、Polyfill

這個應該沒有什麼麻煩了吧，就算不用 Angular 2 寫 TypeScript、CoffeeScript 或者 ES 6 都需要 Transpile 的嘛，另外由於 ES 6 引入了一些新的特性所以往往還需要 Polyfill （比如 Traceur-runtime）。

這個要怪也只能怪瀏覽器廠商咯，要讓 Angular 來背的話實在過了。

8. 其他

如果題主還覺得確實哪裡有「麻煩」的地方，歡迎提出。也確實可能有 Angular 2 或者 TypeScript 做的不夠好的地方，也有一些是為了細粒度控制以便於優化。但是僅僅吐槽「麻煩」是解決不了任何問題的，重要的是了解這樣設計的原因和可能的改進方案。

當然，也希望前端開發能夠越「簡單」，但是歸根到底應該考慮到，我們在做的東西本身就在越來越「複雜」。

teambition/teambition-mobile-web · GitHub angular 1 + typescript 的項目，已經在生產環境使用。

說不上是最佳實踐，題主可以參考下。

ng…已忘初心