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)

第十章 汇总

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348