2016-01-15 20 views
9

我與Angular 1合作多年,現在我開始學習如何使用Angular 2。使用ES5 JavaScript for Angular 2應用程序和使用TypeScript的優點和缺點是什麼?

但是在編寫任何代碼之前,我很難決定是否必須使用TypeScript或JavaScript。

  • 使用TypeScript有什麼優點和缺點?
  • 那些使用普通的舊JavaScript?

獎金的問題:

  • 是否有在角2環境,JavaScript和打字稿之間選擇一個最佳做法?

我不知道打字稿但是從代碼的幾件我所看到的,似乎主要特點是:下一個隱藏的

  • 類型提示

  • 原型機制最常用的Class語法。

我瀏覽網頁後的第一印象:

類型提示:

我喜歡類型提示,但我認爲這是一個有點矯枉過正使用新的語言只是爲了增加這個功能並且會爲開發者提供更多的工作來使用鬆散類型的庫(從文檔中,有一些方法可以做到這一點)。

基於類的styntax:

什麼新類的語法(這是接近ES6)?原型是JavaScript中被誤解最多的特性,但我認爲理解它的工作原理(瞭解你真正的工作)要比簡單地放在一邊更重要。

ES5是一個基於Prototype的編程語言,所以你爲什麼要使用一個基於類的編程語言,它最終會產生原型?這對我來說似乎很奇怪。

代碼生成:

最後一點是關於代碼生成器。我已經在其他上下文中使用過代碼生成器,並且我不太喜歡它:在大多數情況下,人類會生成更好的代碼(我已經查看了生成的js:匿名函數,無處不在的匿名函數!),更簡潔(當談到加載在瀏覽器中生成的js文件的大小是很重要的,以減少加載)

總之:

比如我真的不服氣的利益的學習TypeScript而不是堅持使用ES5 JavaScript。所以我希望得到社區的反饋,以瞭解使用TypeScript的優勢。

+1

請參閱[我應該使用打字稿嗎?或者我可以使用ES6](http://stackoverflow.com/questions/30807612/should-i-use-typescript-or-i-can-just-use-es6)。 Angular 2本身是用Typescript編寫的,所以它最終將成爲Angular 2應用程序的標準。 – lifetimes

+1

你幾乎已經列出了所有的優點和缺點。沒有根本的技術理由去選擇其中一個,Angular只是一個Javascript庫,而且所有東西都被編譯成Javascript,所以它會以某種方式工作。未來社區和生態系統將如何發展我們無法告訴您。拿你的選擇。 – deceze

回答

3

這個問題沒有正確的答案。然而,我被要求在過去的一個月裏從事Angular2的工作,並且我一直在做一些研究和開發。所以也許有一些點可以幫助你:

  • 代碼提示在IDE中仍然不成熟,因爲ts仍然是新的,它仍然在變化。

  • 我同意他們應該專注於原型這是JS的強度和方向,如果他們想OOP他們應該使用OOP語言,但我可以說,沒有什麼可以改變什麼。

  • 我一直在使用TS來研究它,我可以告訴你,與js相比,這個東西更具可讀性,需要更多的設置,但tbh只有一件事對你和它的重要性爲什麼我去了TS方式:

有對角2幾乎沒有文檔,甚至沒有官方的API寫滿的是,片的點點在這裏,你會發現,有或者是帶alpha過時語法不再工作或者寫入TS。我甚至不得不通過src代碼來了解我是如何稱呼它的,因爲它缺少文檔。所以,如果你現在開始,我強烈建議你走這條路。只要你知道你正在做什麼,查看Angular.io頁面並查看開發者指南,在JS中有4個部分,TS中有15個部分,很明顯他們會推動TS。

「在Angular 2上下文中選擇JavaScript和TypeScript是否有最佳做法?」

不,它的喜好,你的項目有多大,你在你的代碼,你想多麼容易在更多的時間開發成本等,以點缺陷多少estructure想的事...

4

我認爲Typescript的優點是Javascript的轉譯。當Javascript中有一個新特性時,編譯器能夠創建更好的Javascript,而我的Typescript不會改變。

我也喜歡Typescript是檢查自己的類型。它已經幫我從編碼錯誤中解救出來,僅僅因爲這些類型不匹配,而且鍵入的數組也幫助我像這樣構造:

let members: array<People>

它強制其他編碼員提供正確的對象類型。

有人也可能認爲本地JavaScript是要走的路,因爲它消除了轉譯過程並且是原生的。

Angular quickstart

打字稿

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent { } 

的Javascript

function(app) { 
    app.AppComponent = 
    ng.core.Component({ 
     selector: 'my-app', 
     template: '<h1>My First Angular 2 App</h1>' 
    }) 
    .Class({ 
     constructor: function() {} 
    }); 
})(window.app || (window.app = {})); 

正如上面的例子說明,我更喜歡打字稿,因爲我的代碼看起來更清潔,因此最好理解。

相關問題