Learning Typescript中文版
總評：感覺是官方文檔的衍生閱讀，重點不在于介紹TypeScript語法本身，語法就是第一章的部分，不到30頁的說明。在傳達其設計理念和整個前端框架的發展花了很多筆墨，對于熟悉后端服務開發的人員來說，還是比較友好的。然后對應用性能，測試方法，裝飾器原理進行了講解，特別后100頁介紹SPA與自己實現一個前端框架尤其有味道，在閱讀Angular源碼之前，值得好好看一看。
第一章 簡介
一、架構
- 防止運行時才發現錯，在編譯期進行靜態代碼類型分析 => 強類型
- 源自JavaScript，通過增加特性方式進行適應
- 遵循ECMAScript規范，由編譯器保證程序的兼容性，甚至能做到向后(未發布的規范標準)兼容。
二、組件
三層5個組件。
三、Hello World
- 在tslang.cn/play/上運行Greeter.ts程序
- npm 安裝 + tsc安裝，編譯。
四、變量、基本類型和運算符
- 原始類型：boolean，number，string，array，enum，any，void
全小寫（特別string），undefined和null不是原始類型（null作為字面量，undefined作為全局變量），var、let、const定義變量 - 聯合類型：類型用“|”隔開，變成一直介于弱類型（any）和強類型（class）之間的類型。
- 類型守護：在用typeof或instance驗證后(通常在if語句里面)，自動更改其類型(防止運行時錯誤)。
- 類型別名
- 環境聲明：默認有個lib.d.ts文件，包含DOM這種JS內置庫。
- 算術運算符，比較運算符，邏輯運算符，位運算符，賦值運算符
- 箭頭函數 =>
五，類接口，命名空間
TypeScript語法大概就這么點篇幅
第二章 自動化工作流程
一、一個現代化開發流程
- 版本工具、包工具、自動化任務、自動化測試、持續集成、腳手架
- 開發工具：Nodejs，Atom，Git和GitHub，npm，Bower，Tsd
- 自動化任務工具：Grunt和gulp(本書介紹Gulp)
- 代碼質量檢查：gulp-tslint
- 編譯Typescript代碼：gulp-Typescript（tsconfig.json嵌入格式一致）
- 優化TypeScript應用：commonJs->Browsrify
- 管理Gulp任務執行順序：run-sequence插件
- 自動化測試工具：基于Mocha的Karma，Karma.conf.js
- 跨設備同步：Browser-sync (3001端口)
- 持續集成工具（CI）: TravisCI
- 腳手架工具： yeoman
a.generator-typescript b.generator-gulp-sass-typescript.
本章重點在講解gulp，可以類比Ant，以任務和插件方式控制程序的開發流程。了解一下，現在已經是Webpack天下。
第三章 使用函數
一、在Typescript中使用函數
- 函數聲明和函數表達式：不同在于，聲明會先解析（變量提升原理），表達式必須先定義才能使用（按順序）
- 函數類型定義：Typscript加上“：”標注參數或返回值類型，如不標注，默認為any。
- 有可選參數的函數： 參數后面加一個？
- 有默認參數的函數： 參數后面加=，賦值
- 有剩余參數的函數： 最后參數加上...,利用了JS強大動態性，用數組比...高效
- 函數重載：聲明加實現
- 特定重載簽名
- 函數作用域：JS無塊作用域，僅支持函數作用域，Typescript使用let，const使變量有塊作用域。
- 立即調用函數表達式： 反正變量提升，污染代碼
二、泛型：（泛型都打成范型了）
三、tag函數和標簽模板： tag函數（專用），防止代碼注入
四、異步編程：
- 回調函數：已函數作為參數，或者返回一個函數的函數。
- 箭頭函數：與表達式基本一致，綁定this變量（內部用_this別名完成）
- 回調地獄：多重嵌套回調，引入Promise，有3個核心狀態，（Q框架實現）
- 完成4中異步流程控制：并行、串行、瀑布流、混合
- 生成器： function加上星號（*），Rx風格
- 異步函數：async，swait
第四章 面向對象
一、SOLID原則
- 單一職責（SRP）
- 開閉原則（OCR)
- 里氏替換（LSP）
- 接口隔離（ISP）
- 依賴反轉（DIP）
二、類
- 構造函數用的是constructor方法。
三、接口
四、關聯、聚合、組合
五、繼承
六、混合（多重繼承），用Implements（占位屬性聲明），再用applyMixins實現繼承（后面覆蓋前面同名屬性）
七、泛型和泛型約束
八、命名空間
- namespace、import、export實現模塊化，
九、模塊加載器
- RequireJS(AMD)，Browserify（CommonJS），SystemJs（通用）
- ES6模塊語法，運行時和程序設計時
- 外部模塊語法：程序設計時
- AMD模塊定義語法：運行時
- CommonJS模塊定義語法：運行時
- UMD模塊定義語法：運行時
- SystemJS模塊定義語法：運行時
在tsconfig.json中的CompilerOption的Module中配置運行時支持哪個語法。
十、循環依賴
第五章 運行時（就是JS運行時）
一、環境
1.概念：幀：連續工作單元，保存在棧中。
棧：保存程序執行依賴的變量
隊列：保存程序執行的命令列表
堆：內存空間，以（key-value保存），有垃圾回收
二、this操作符
- 全局（指向windows），
- 函數上下文：
1）實例中：指向該實例，
2）構造方法中：指向被構造對象
3）call，apply，bind，可在調用時指定
4）SetTimout等回調，指向函數的調用者->windows對象
三、原型：
- 原型繼承模型：沒有類，只有模型對象
- 基于原型的繼承： _extend函數，（有變化，可在play網站看）
- 原型鏈與原型遮蔽
- 原型對象的訪問：protoytpe，getPrototypeof，proto
- new 操作符
四、閉包：
源自同一環境變量共享，破除方法，用更多的閉包隔離。
- 閉包與靜態變量
- 閉包和私有變量
這塊說的還可以，推薦《你不知道的JavaScript》系列
第六章 應用性能
一、性能和資源：
- 性能指相對于時間和資源消耗所完成的任務量。
- 有限資源：CPU，GPU，RAM，HDD（SSD），網絡吞吐量
二、性能指標
可用性、相應時間、處理速度、延遲、帶寬、可伸縮性
三、性能分析
注意瀏覽器的DomContentLoaded和Load事件
四、性能和用戶體驗，2S
五、GPU性能分析、CPU性能分析
Chrome的Profils
六、內存：內存快照，垃圾回收
七、性能自動化工具：
Gulp、Karma、Jmeter
八、錯誤處理：
Error類，Try...Cache
第七章 應用測試
一、測試術語：
斷言、測試規范、測試用例、測試套件、測試監視、測試樁、模擬、測試覆蓋率
二、準備工作：
Gulp、Karma、Istanbul、Mocha、Chai、SinonJs、PlantomJs、Selenium、NightWatch.js
三、測試計劃：
TDD BDD 測試用例
四、測試demo
- 基礎機構
- 用Gulp構建測試
- Karma運行單元測試
- Selenium運行E2E測試
- Mocha創建斷言，規范、事件
- 測試異步代碼： done()函數
- 測試異常
- SinonJs寫測試樁
- 測試監視
- 測試樁
- NightWatch.js創建E2E測試
測試框架多，關系復雜，因而Angular實現的時候注意到這些，自己實現了一套測試框架。對外依賴就有限了。
第八章 裝飾器
在tsconfig.json中，emitDecoratorMetadata：true
一、注解與裝飾器
- 注解為類、方法添加元數據（額外屬性）
- 裝飾器在代碼設計時，注釋和修改類和累的屬性（額外動作）
注解是運行時修改，裝飾器是編譯器修改（對于源碼）
二、類裝飾器
- 接受一個類構造函數作為參數的函數，返回Undefined時用原來的構造函數，有返回值，覆蓋原來的構造函數
- 生成代碼中__decorate()方法。
三、方法裝飾器
- 接受三個參數（方法的對象、方法名，可選參數）的函數，返回動作同上。
- 代碼邏輯，有點AOP味道（getOwnPropertyDescriptor）
四、屬性裝飾器
- 接受兩個參數（屬性對象，屬性名）的函數，返回動作同上。
- Object.defineProperty()方法
五、屬性裝飾器
- 接受三個參數（參數方法對象，參數方法，參數列表索引）的函數，返回動作同上。
六、裝飾器工廠
- 返回上述幾個裝飾器的函數，使得同一個裝飾器能用在多個地方，比如Angular的@Input，可以用在屬性上，也可以用在參數上
- 其內部是根據參數的數量和類型判斷
七、帶參數的裝飾器
需要把裝飾器方法包裹起來，外面接受的參數做另外的處理
八、反射元數據API
- 保留裝飾器
- Reflect類，類似反射實現。
第九章 應用架構
一、單頁應用架構SPA
- 基于Ajax，可以動態加載一些內容，避免不必要的重載（頁頭，頁尾）
- 前端工作量可能更多，性能可能更差（操作多，請求多），而外的好處是：
1）把工作轉移到日益加強性能的瀏覽器端，服務端工作少，能支撐的接入更多了。
2）使用HTTP API，后端邏輯更清晰簡單
3）服務端可以單獨作為產品銷售（GitHub API）
4）兼容移動版本，耦合性更低，成本更小，修改更為方便 - 一個Demo（基于Handlebar 模板）
1）請求數據 2）請求模板 3）編譯模板 4）加載數據
二、MV*架構的組件和功能
model:存儲數據的組件
collection：一組model
item View：負責把model中數據渲染成Html
Collection View： 特殊的View，構造時傳入一個Collection，一個Item View，一個容器（頁面標簽），避免為collection中每個model渲染。
Controller：管理特定model,相關view生命周期
事件：用戶事件，程序事件
路由與hash（#）
中介器：異步通訊機制（Pub/Sub)，降低模塊間的耦合性。
調度器：dispatcher -> 控制Controller
客戶端渲染。Virtual Dom （臟值檢測，Observabl Model）
用戶界面數據綁定： 單項，雙向
-
數據流Flux：一個值變化，依賴該變量的其他變量都會重新計算。
typescript2.png web component和shaow Dom
三、框架選擇
js框架太多了，目前是React，Angular，Vue三者。
四、實現一個MVC框架
-
框架圖：
typescript3.png 程序目錄
1）程序事件（IAppEvent、AppEvent）
2）中介器（IMediator、Mediator）：內部由JQuery實現，tigger()，on(),off()。
3）程序組件（IAppSettings、IControllerDetails，App）
自動初始化中介器、路由，調度器。
4）路由表（IRoute，Route）
5）事件發射（IEventEmitter、EventEmitter）：關聯中介器和事件。
6）路由（IRouter、Router）
7）調度器（IDispatcher、Dispatcher）
8）模型（IModel和ModelSetting）
9）視圖（IView和View）
10）框架（index.ts,全都export）
