angular2要用typescript，是不是現在該提前做好準備了，開擼typescript？

畢竟看好angular2

---

傳教模式: 開. (無恥地模仿欽點軟狗)

必然擼! Angular 2 本身和 TypeScript 直接帶來的好處是沒什麼聯繫的, 其實即便沒有 Angular 和由其帶入的 annotation (decorator), TypeScript 也會有自己的一套. 估計會更像 C# 的 attribute.

但 Angular 2 對於 TypeScript 的生態建設意義重大, 其實不只是 Angular 2, Facebook 也對 TypeScript 持非常友好的態度. 比如在 React 倉庫中搜索 TypeScript, 還有 Immutable.js 中詳盡的 TypeScript 聲明文件. 作為對社區的響應, TypeScript 也相當及時, 除了 Angular 2 中的 annotation 在 TypeScript 1.5 中被加入, 還有 1.6 中對 JSX 的支持.

關於 TypeScript 的設計目的和優勢就不再贅述了, 有興趣的同學可以看我之前的答案 flow.js/typescript 這類定義參數類型的意義何在？ - vilicvane 的回答.

這裡再提一些常見的誤解.

TypeScript 對 JavaScript 不友好, 無法從 JavaScript 編譯到 TypeScript.

Seriously? - -||

TypeScript 是和 CoffeeScript 類似的東西.

形式上是, 本質上完全不同. 兩者的設計目的是不一樣的.

TypeScript 嚴重依賴 IDE.

VS 寫 TypeScript 是不錯, 然而還有 VS Code, Sublime, Atom... 算上 IDE 還有 Ellipse, WebStorm... 事實上, TypeScript 提供了強大的語言工具/服務, 非常方便第三方編輯器集成, 也基本就是傳傳游標位置, 獲取自動完成列表的事情叻... 其他的別個都給你搞好了... (誤, 但 TypeScript 在這方面確實下了非常大的功夫, 一開始就奔著生態建設去的.)

然而用 TypeScript 也是有代價的! 比如:

• 編譯需要花時間, 文件多了就慢了.
  不過在 1.5.3 加入了 Transpile API, 可以方便三方任務提速編譯. 1.6 中將加入的 node_modules 模塊解析邏輯也能更方便地拆分大項目, 加快編譯時間.
• tsconfig.json 文件列表配置還不大夠用, 1.6 中也僅添加了 exclude 稍稍緩解了問題. 需要花一些思考項目目錄方案 (尤其是想前後端都用 TypeScript).
• VS Code 上文件增加和刪除需要重新打開項目才能生效, 比較疼 (VS 自然是沒有這個問題的, 還有 真·CompileOnSave).

再然而, 綜合考慮 TypeScript 的利弊, 我還是會堅定地選擇折騰! (絕對不僅是因為我是軟狗.)

最後, 嚴重不推薦 JavaScript 基礎不過關的同學用 TypeScript!

背景: 答主所在公司隨答主在 TypeScript 1.5 alpha (四月中旬) 時棄 PHP 轉 Node.js, 並使用 TypeScript 作為 Node.js 的開發語言. 團隊目前約 10 人, 幾乎就只有答主一人使用 Windows, 但是大家都在 Mac 上愉快地用著 VSC.

---

• 如果是因為 Angular 2 採用了 TypeScript ，那麼沒有多大必要，因為 Angular 2 的難點從來就不來自於 TypeScript，並且其語法上具有絕對的包容性，不論以 TypeScript、ES6 還是 ES5 都能很方便的使用。

• 如果是因為你的項目足夠複雜又不願寫測試（當然這是病得治），你需要依賴於靜態類型系統來增強可靠性，或者你天生討厭 JavaScript 的動態類型特性，那麼用 TypeScript 當然是極好的。

先談談 Angular 2 的包容性：

1. 政治最正確的用法（TypeScript with Annotation）

@Component({
selector: "my-app"
})
@View({
template: "&Hello World!&"
})
class AppComponent {
}


2. 不喜歡 Annotation 的數組標註法

function AppComponent() {} //這裡換成 class 也是一樣
AppComponent.annotations = [
new angular.ComponentAnnotation({
selector: "my-app"
}),
new angular.ViewAnnotation({
template: "&Hello World!&"
})
];


3. 喜歡 Annotation 但是不喜歡 TypeScript 的偽標註法

var AppComponent = angular.Component({
selector: "my-app"
}).View({
template: "&Hello World!&"
}).Class({
});
//可參見 https://angular.io/docs/js/latest/api/core/TypeDecorator-interface.html


也就是說，Angular 在用法上並沒有對 TypeScript 用戶增加什麼特殊的語法糖，不論你用 TypeScript、ES6、ES5，都可以獲得類似的體驗。

-------以下是原答案-------

TypeScript 的核心是在 JavaScript 上增加了 靜態類型 特性。當然還有其他一些特性，但是不論是相對於 Angular 還是相對於 TypeScript 本身都不重要。

TypeScript 相對於 JavaScript 來說並沒有多大的學習成本，更多的是主觀意願問題，很多人可能就是因為 JavaScript 沒有繁雜的類型系統才喜歡用的。

回到正題，先來總結下 Angular 2.0 的差別都在哪。

1. 標註（Annotation）

最反直覺的地方，就是 Angular 2.0 把大量定義內容（非邏輯代碼）採用 Annotation 的形式放到了元數據當中。形如：

@Component({
selector: "my-app"
})
@View({
template: "&Hello {{ name }}&"
})
class MyAppComponent {
...
}


然而，特別注意，

Annotation 不是 TypeScript 的語法！！！！！

Annotation 不是 TypeScript 的語法！！！！！

Annotation 不是 TypeScript 的語法！！！！！

Angular 2.0 剛剛宣布的時候，採用的是 TypeScript 的超集 AtScript ，Annotation 是 AtScript 的語法，之後 AtScript 被放棄，開發團隊改用 TypeScript ，但是 Annotation 繼續保留，於是：

Annotation 現在是無主語法！！！！！

Annotation 現在是無主語法！！！！！

Annotation 現在是無主語法！！！！！

雖然 TypeScript 在明說了不會支持 Annotation 的情況下默默增加了新版本編譯器對其的支持選項，但是這是完全沒有任何文檔指導的啊！現在唯一有的文檔只有 Angular 自己的文檔，但是現在 Angular 的文檔完全沒法看！全沒法看！沒法看！法看！看！按！

註：我當然知道TypeScript在1.5版本已經開始支持ES7的Decorator，看起來很像AtScript的Annotation，但是在被放到文檔之前，這個頂多算編譯器功能，並不算語言語法。沒有發現TypeScript有掛靠任何標準組織，暫時傾向於以其自己的Language Spec為語法標準。

目前 Proposal 中（javascript-decorators/README.md at master · wycats/javascript-decorators · GitHub）的 Decorator 僅支持 class 和 property ，而 TypeScript/Angular 中的 Annotation 可以支持到構造函數的參數。都創造新功能了顯然並不是一個 Polyfill。

【截至今天（2015.09.06） TypeScript 的 Spec 裡面依然沒有任何 Annotation 的內容，你唯一可以看到示例的地方在它的某個 GitHub Issue 里。】

2. 模塊化

Angular 1.x 採用自己的模塊定義，壞處是如果要用非 Angular 的代碼一般都要進行一層封裝（比如 Angular-Bootstrap）；好處是，大家都這麼用慣了。

Angular 2.0 採用了 ES6 的標準模塊定義，好處是，它是標準的，如果大家都這麼乾的話相互調用會變得很方便；壞處是，大家一開始都會用的不習慣。

ES6 的模塊引入示例：

import {Component, View, bootstrap} from "angular2/angular2";


有點類似於 Python 的 import 大法，不過別人是 from 放前面的。

值得注意的事，這裡的引用不再是應用級別的了，而是文件級別的。（仔細想想好像也沒什麼不對，不管是 #include、using、import、open 等等好像都是文件級的。）

3. 數據綁定

首先，一個悲哀的情況是，沒有 Scope 了，沒有 Controller 了，我需要花一些時間來思考一下人生。

看看示例，看起來貌似在 HTML 的語法上是變得更簡單了，對應的 TypeScript 實現也是。比如 1.4 的 ngRepeat 有 200 行，2.0 對應的 ngFor 只有 100 行不到了。貌似是使用了 2.0 的 View 和 ViewContainer 等等之類的東東來簡化了在處理 Scope 上花的無關代碼。

但是，View 是什麼，Template 是什麼，ViewContainer 又是什麼，看文檔等於什麼都沒看，看源碼整個人都不好了。

4. 路由

2.0 終於支持子路由了，1.x 的時候只有一個 ng-view 確實很麻煩。不過 angular-ui 的 ui-router 早就有了，並不是什麼大亮點。

5. 數據格式化

Filter 終於不叫 Filter 了，改名叫 Pipe 了，和寫法的讀法一樣，避免了有個 filter 叫 filter 這樣的神奇情況。這部分也是為數不多的能看源碼看的毫無壓力的地方。。。

總結

TypeScript 確實是一門很優秀的語言，可以深入學習沒什麼危害。

當你把 TypeScript 學得了如指掌的時候，再回來看 Angular ，你會發現。。這和 TypeScript 有毛線關係。。

---

Type棒棒噠，哪怕不用Angular也可以值回票價了。而且對於熟悉JavaScript的人來說，TypeScript幾乎就是沒難度……它只是給JavaScript擴展了一下而已。用VS或者WebStrom照著官網的常式寫幾個就能感覺到用Typescript的愉快了。

拿Coffee作比對的話……coffee給我的感覺是很好玩，typescirpt給我的感覺是很好用……

---

額，做過java的話，花1-2天學習下typescript基本就會懂了

typescript能夠大幅提高開發效率，並減少錯誤

藉機展示一下個人博客，用angular2重構的

https://www.btnas.com

---

支持 微軟爸爸

---

慢慢的喜歡上了typescript啦，對angular2上手也沒有難度

---

Library的確應該用TypeScript

Application並不一定是

---

一點拙見：寫了一些簡單的應用後覺得，Angular2的思路還是和1差不多的。使用TypeScript主要是為了一個成熟的類ES6（提供class和arrow function等痛點）、又提供Annotation（優雅地引入和改進1中的controllerfactory等等概念的實現）的環境。TypeScript在大多情形下，和普通地使用JavaScript沒有太多的區別。另外說一點，類型檢查其實是非常有用的。

---

用了ts的ng完全不是一個寫法，幾乎就是另一個框架。但是ts本身還是很容易的，其實他就是es6里的面向對象加強類型而已，他本來就是js基礎上的一些增加，和什麼上面說的今天A語言明天B語言毫無關係，因為都是js，只不過你提前寫帶強類型的es6而已。更有利於團隊合作，精準的語法檢查和智能提示。因為ts保存時編譯成js，所以從模型類改起來很平滑。

---

構建大型代碼必要 另外visual code強力支援 讓你體會到及時檢查好處

---

直接es6不謝，雖然現在是編譯為es5，那是瀏覽器不支持

---

框架一變，開發者就得跟著變，是不是有點無趣呢？等你學好了typescript後，ag3來一句改成coffeescript，你是不是又得換呢？基礎最重要，學習效率和能力上去了，學什麼都是一下子的事情。還是把javascript精通比較好。國內最好能夠有自己的「typescript」，不然老是跟著別人跑。

---

推薦閱讀：