Learning Typescript-读书笔记

Learning Typescript.jpg

总评：感觉是官方文档的衍生阅读，重点不在于介绍TypeScript语法本身，语法就是第一章的部分，不到30页的说明。在传达其设计理念和整个前端框架的发展花了很多笔墨，对于熟悉后端服务开发的人员来说，还是比较友好的。然后对应用性能，测试方法，装饰器原理进行了讲解，特别后100页介绍SPA与自己实现一个前端框架尤其有味道，在阅读Angular源码之前，值得好好看一看。

第一章简介

一、架构

防止运行时才发现错，在编译期进行静态代码类型分析 => 强类型
源自JavaScript，通过增加特性方式进行适应
遵循ECMAScript规范，由编译器保证程序的兼容性，甚至能做到向后(未发布的规范标准)兼容。

二、组件

typescript1.png

三层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）