TypeScript, Angular 和移動端的跨平臺開發

摘要

Google技術經理陳亮將爲你們介紹TypeScript和Angular是什麼以及如何利用TypeScript和Angular進行移動端的跨平臺介紹。

內容來源：2017年7月15日，Google Engineering Manager陳亮在「2017 JavaScript中國開發者大會」進行《TypeScript, Angular, 和移動端的跨平臺開發》演講分享。IT 大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數：2027 | 3分鐘閱讀

嘉賓演講視頻及PPT： t.cn/RTRvFIc

What’s TypeScript？

TypeScript是凌駕於ES五、ES6，具有靜態類型的JavaScript的超集。它爲咱們帶來的優點包括將來JavaScript的一些特徵在TypeScript裏都有。而且它有一個很是強大的類型系統，經過這個強大的類型系統，可以和IDE進行很好的整合。

TypeScript在2012年的時候作了發佈，當時的創始人Anders HejIsberg是微軟的一個架構師，用他的話來講，TypeScript makes JavaScript scale.當咱們用TypeScript來寫程序的時候，咱們作更多的模版擴展，擴展software，可以有更強的可讀性。同時咱們看到的一些接口也會更加明瞭，對於咱們的開發有很大幫助。當咱們用TypeScript來寫程序的時候，可讀性獲得了大量的提升，全部的API接口更清晰明瞭，以幫助咱們更好的擴展龐大應用的開發。TypeScript的研發理念也但願咱們不管在什麼瀏覽器、什麼工做系統上都能運行一個穩定可延性強的語言。

TypeScript Type System

TypeScript自帶了一個編譯器，經過一些簡單的配置tsconfig.json就能夠把TypeScript轉換成ES5或ES6。它除了進行基本類型的檢測以外，還能幫咱們作一些重構。

當一個變量的類型改變了以後，頗有可能在項目裏其它地方也須要改動。它的tsc的compiler能夠幫助咱們修改，不用手動去改每一個地方。

雖然TypeScript但願你們儘可能在每一個地方都能標註它的類型，但其實這個類型是可選的。緣由有兩個，其中一個緣由就是當咱們須要和不少其它第三方程序庫進行整合的時候，咱們並不能保證它有這個型別的定義。另外一個緣由就是TypeScript對於不少開發團隊來講仍是比較新的，不少時候須要逐步地更改project來和TypeScript進行整合，因此它在設計的時候就已經把這個考慮進去了。

如今很火的三個框架都和TypeScript進行了整合，它們的類型定義在網上均可如下載。

TypeScript Typing

TypeScript自己其實有一些很是細微但頗有用的機制，這些機制能夠幫助咱們在寫前端代碼的時候更加有效。

StrictNullCheck能夠防止在整個流程中出現常見錯誤。

對於開發者來講咱們不少時候須要必定的控制，TypeScript提供了類型的轉換和類型的斷言。

在TypeScript裏有一個很是特別的類型叫any，用於描述咱們在編譯時的未知類型Type。

TypeScript Type Definition

真正使TypeScript強大的仍是要歸根於類型定義文件。類型定義文件裏有接口、函數定義等等。在通常的前端構造裏，瀏覽器和DOM有很是多的類型。

當你在用npm去安裝這些模塊的時候，假如它已經具有了這些類型的定義，那麼編輯的環境就能夠立刻意識到，幫助你在編程過程當中作到自動完成的功能，有效的提升了開發者的效率。

Why Angular?

速度和性能是選擇Angular的重要緣由之一。

Angular很強大的一點在於他的模板編譯是跨平臺的，和傳統的DOM作了一個脫鉤的理念，讓用戶界面能更好的的呈如今用戶面前。另外Angular 的強大選染引擎也在應用最終發佈的時候能把APP壓縮到是原來的60%左右。

Angular從一開始構建的時候就很是注重Scalability。在Google內部，當一個工程師改了一行Angular代碼的時候有成千上萬的單元測試都會被運行。咱們但願平臺是一個穩定的平臺，新出的版本不會破壞之前現有產品的開發。

Angular還有三個支柱，一個是核心，一個是圍繞核心衍生出的程序庫，還有一個是工具。

Angular Core

鑑於咱們如今的渲染器徹底脫離了DOM，這樣的渲染讓咱們的表達很是expressive。不論是組件、指令、內容投放仍是「管道」都能讓咱們的開發者更方便地去描述想要作的事情。

還有就是依賴注入，這個對於寫過不少單元測試的朋友應該不陌生。它能幫助咱們在Angular組件裏去更好地和服務以及內部一些API進行鏈接，咱們做爲開發者就不用太過擔憂怎樣管理這樣的一些關係。

Zones是非同步處理的執行環境。咱們的程序裏有不少非同步的一些事件或函數，Zones會直接把它進行復寫，複寫以後經過對事件和函數的監測，能更有效的提升模板局部更新的速度。

Angular的變化檢測跟不少前端框架同樣，有一個模版須要被渲染，渲染的時候內部組件有一個物件的改變，就須要進行檢測。

在Angular裏面有一個非同步執行的context，它複寫了全部非同步的函數和事件，當每次結束的時候都須要在每一個組件裏作一個變化的檢測。

Angular Animation

Angular的動畫是基於standard Web Animation的API，因此它能夠利用到不少瀏覽器自帶的硬件加速對它進行支持，讓它跑得更快。

Angular Tooling

Angular的工具也很強大，有AOT、Angular Universal和Angular CLI幫助你們去快速開發項目。

Future:Smaller,Faster,Easier to Use

Angular的下一代是Angular5，在今年稍晚就會推出。它的理念是讓整個框架容量更小，在各個平臺上跑得更快，各租件和API更通俗明瞭，容易上手。

Native Script

NativeScript是一個提供runtime編譯轉碼的運行層框架，可讓你的JavaScript和Angular模板直接轉化成相對應的原生函數和租件。每個元素都會最終成爲一個原生的元素，而由於它用的是Angular的語法，廣大的前端開發同窗們能夠很熟悉的上手，一目瞭然。NativeScript在運行過程時，用Angular的渲染器去編譯模板，parse把它轉換成protoview，protoview再通過Native Script run-time把它轉換成原生的控件。

每個元素都會最終成爲一個原生的元素。要注意的是，它全部的語法和Angular是同樣的，因此在渲染的過程當中不會有任何問題。

Native Script渲染

用Angular的渲染器去編譯XML，prase完成後，編譯器會把它轉換成protoview，protoview再通過Native Script run-time把它轉換成原生的控件。

我以爲今天給你們展現的還只是一些毛皮，我建議你們必定要看看TypeScript，由於它能幫助你們寫出更好的程序。今天很高興能和你們分享Google的一些技術，也但願你們能多多思考一下前端將來的發展，謝謝你們！