Learning Typescript-读书笔记

---

Learning Typescript.jpg

Learning Typescript中文版

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

第一章 简介

一、架构

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

二、组件

typescript1.png

三层5个组件。

三、Hello World

1. 在tslang.cn/play/上运行Greeter.ts程序
2. npm 安装 + tsc安装，编译。

四、变量、基本类型和运算符

1. 原始类型：boolean，number，string，array，enum，any，void
   全小写（特别string），undefined和null不是原始类型（null作为字面量，undefined作为全局变量），var、let、const定义变量
2. 联合类型：类型用“|”隔开，变成一直介于弱类型（any）和强类型（class）之间的类型。
3. 类型守护：在用typeof或instance验证后(通常在if语句里面)，自动更改其类型(防止运行时错误)。
4. 类型别名
5. 环境声明：默认有个lib.d.ts文件，包含DOM这种JS内置库。
6. 算术运算符，比较运算符，逻辑运算符，位运算符，赋值运算符
7. 箭头函数 =>

五，类接口，命名空间

TypeScript语法大概就这么点篇幅

第二章 自动化工作流程

一、一个现代化开发流程

1. 版本工具、包工具、自动化任务、自动化测试、持续集成、脚手架
2. 开发工具：Nodejs，Atom，Git和GitHub，npm，Bower，Tsd
3. 自动化任务工具：Grunt和gulp(本书介绍Gulp)
4. 代码质量检查：gulp-tslint
5. 编译Typescript代码：gulp-Typescript（tsconfig.json嵌入格式一致）
6. 优化TypeScript应用：commonJs->Browsrify
7. 管理Gulp任务执行顺序：run-sequence插件
8. 自动化测试工具：基于Mocha的Karma，Karma.conf.js
9. 跨设备同步：Browser-sync (3001端口)
10. 持续集成工具（CI）: TravisCI
11. 脚手架工具： yeoman
    a.generator-typescript b.generator-gulp-sass-typescript.

本章重点在讲解gulp，可以类比Ant，以任务和插件方式控制程序的开发流程。了解一下，现在已经是Webpack天下。

第三章 使用函数

一、在Typescript中使用函数

1. 函数声明和函数表达式：不同在于，声明会先解析（变量提升原理），表达式必须先定义才能使用（按顺序）
2. 函数类型定义：Typscript加上“：”标注参数或返回值类型，如不标注，默认为any。
3. 有可选参数的函数： 参数后面加一个？
4. 有默认参数的函数： 参数后面加=，赋值
5. 有剩余参数的函数： 最后参数加上...,利用了JS强大动态性，用数组比...高效
6. 函数重载：声明加实现
7. 特定重载签名
8. 函数作用域：JS无块作用域，仅支持函数作用域，Typescript使用let，const使变量有块作用域。
9. 立即调用函数表达式： 反正变量提升，污染代码

二、泛型：（泛型都打成范型了）

三、tag函数和标签模板： tag函数（专用），防止代码注入

四、异步编程：

1. 回调函数：已函数作为参数，或者返回一个函数的函数。
2. 箭头函数：与表达式基本一致，绑定this变量（内部用_this别名完成）
3. 回调地狱：多重嵌套回调，引入Promise，有3个核心状态，（Q框架实现）
4. 完成4中异步流程控制：并行、串行、瀑布流、混合
5. 生成器： function加上星号（*），Rx风格
6. 异步函数：async，swait

第四章 面向对象

一、SOLID原则

1. 单一职责（SRP）
2. 开闭原则（OCR)
3. 里氏替换（LSP）
4. 接口隔离（ISP）
5. 依赖反转（DIP）

二、类

1. 构造函数用的是constructor方法。

三、接口

四、关联、聚合、组合

五、继承

六、混合（多重继承），用Implements（占位属性声明），再用applyMixins实现继承（后面覆盖前面同名属性）

七、泛型和泛型约束

八、命名空间

1. namespace、import、export实现模块化，

九、模块加载器

1. RequireJS(AMD)，Browserify（CommonJS），SystemJs（通用）
2. ES6模块语法，运行时和程序设计时
3. 外部模块语法：程序设计时
4. AMD模块定义语法：运行时
5. CommonJS模块定义语法：运行时
6. UMD模块定义语法：运行时
7. SystemJS模块定义语法：运行时

在tsconfig.json中的CompilerOption的Module中配置运行时支持哪个语法。

十、循环依赖

第五章 运行时（就是JS运行时）

一、环境

1.概念：帧：连续工作单元，保存在栈中。
栈：保存程序执行依赖的变量
队列：保存程序执行的命令列表
堆：内存空间，以（key-value保存），有垃圾回收

二、this操作符

1. 全局（指向windows），
2. 函数上下文：
   1）实例中：指向该实例，
   2）构造方法中：指向被构造对象
   3）call，apply，bind，可在调用时指定
   4）SetTimout等回调，指向函数的调用者->windows对象

三、原型：

1. 原型继承模型：没有类，只有模型对象
2. 基于原型的继承： _extend函数，（有变化，可在play网站看）
3. 原型链与原型遮蔽
4. 原型对象的访问：protoytpe，getPrototypeof，proto
5. new 操作符

四、闭包：

源自同一环境变量共享，破除方法，用更多的闭包隔离。

1. 闭包与静态变量
2. 闭包和私有变量

这块说的还可以，推荐《你不知道的JavaScript》系列

第六章 应用性能

一、性能和资源：

1. 性能指相对于时间和资源消耗所完成的任务量。
2. 有限资源：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

1. 基础机构
2. 用Gulp构建测试
3. Karma运行单元测试
4. Selenium运行E2E测试
5. Mocha创建断言，规范、事件
6. 测试异步代码： done()函数
7. 测试异常
8. SinonJs写测试桩
9. 测试监视
10. 测试桩
11. NightWatch.js创建E2E测试
    测试框架多，关系复杂，因而Angular实现的时候注意到这些，自己实现了一套测试框架。对外依赖就有限了。

第八章 装饰器

在tsconfig.json中，emitDecoratorMetadata：true

一、注解与装饰器

1. 注解为类、方法添加元数据（额外属性）
2. 装饰器在代码设计时，注释和修改类和累的属性（额外动作）
   注解是运行时修改，装饰器是编译器修改（对于源码）

二、类装饰器

1. 接受一个类构造函数作为参数的函数，返回Undefined时用原来的构造函数，有返回值，覆盖原来的构造函数
2. 生成代码中__decorate()方法。

三、方法装饰器

1. 接受三个参数（方法的对象、方法名，可选参数）的函数，返回动作同上。
2. 代码逻辑，有点AOP味道（getOwnPropertyDescriptor）

四、属性装饰器

1. 接受两个参数（属性对象，属性名）的函数，返回动作同上。
2. Object.defineProperty()方法

五、属性装饰器

1. 接受三个参数（参数方法对象，参数方法，参数列表索引）的函数，返回动作同上。

六、装饰器工厂

1. 返回上述几个装饰器的函数，使得同一个装饰器能用在多个地方，比如Angular的@Input，可以用在属性上，也可以用在参数上
2. 其内部是根据参数的数量和类型判断

七、带参数的装饰器

需要把装饰器方法包裹起来，外面接受的参数做另外的处理

八、反射元数据API

1. 保留装饰器
2. Reflect类，类似反射实现。

第九章 应用架构

一、单页应用架构SPA

1. 基于Ajax，可以动态加载一些内容，避免不必要的重载（页头，页尾）
2. 前端工作量可能更多，性能可能更差（操作多，请求多），而外的好处是：
   1）把工作转移到日益加强性能的浏览器端，服务端工作少，能支撑的接入更多了。
   2）使用HTTP API，后端逻辑更清晰简单
   3）服务端可以单独作为产品销售（GitHub API）
   4）兼容移动版本，耦合性更低，成本更小，修改更为方便
3. 一个Demo（基于Handlebar 模板）
   1）请求数据 2）请求模板 3）编译模板 4）加载数据

二、MV*架构的组件和功能

1. model:存储数据的组件

2. collection：一组model

3. item View：负责把model中数据渲染成Html

4. Collection View： 特殊的View，构造时传入一个Collection，一个Item View，一个容器（页面标签），避免为collection中每个model渲染。

5. Controller：管理特定model,相关view生命周期

6. 事件：用户事件，程序事件

7. 路由与hash（#）

8. 中介器：异步通讯机制（Pub/Sub)，降低模块间的耦合性。

9. 调度器：dispatcher -> 控制Controller

10. 客户端渲染。Virtual Dom （脏值检测，Observabl Model）

11. 用户界面数据绑定： 单项，双向

12. 数据流Flux：一个值变化，依赖该变量的其他变量都会重新计算。

    
    
    

    typescript2.png

13. web component和shaow Dom

三、框架选择

js框架太多了，目前是React，Angular，Vue三者。

四、实现一个MVC框架

1. 框架图：

   
   
   

   typescript3.png

2. 程序目录
   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）

第十章 汇总