欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Learning TypeScript 读书笔记1

程序员文章站 2022-07-03 22:06:52
...

《Learning TypeScript》english edition, 2015

Chap 1 简介

1.TypeScript设计目标

  • 强类型,需编译
  • javascript的超集
  • 支持大型工程,提供基于面向对象的类/接口/模块
  • 运行时是javascript代码
  • 与ECMAScript标准对齐,支持ECMAScript6
  • 支持跨平台的开发工具

2.npm环境下安装:npm install -g typescript。编译:tsc test.ts

3.强类型语言,使用:加类型声明变量,支持自动推导。类型有:

  • any:所有类型的父类型,可以赋值为任意类型
  • void:空类型,例如函数返回值为空可以设置为void
  • boolean:布尔类型,true/false
  • number:数字类型
  • string:字符串类型
  • Array:数组类型,两种声明方式:
    • var list:number[]=[1,3,5];
    • var list:Array<number>=[2,4,6];
  • enum:枚举类型,例如enum Color{Red,Blue,Green}; var c:Color=Colr.Green;

Javascript中的undefined和null不能作为类型使用。undefined表示变量声明未初始化:var test;alert(test);//undefined。null表示一个特殊值:var test=null;alert(test);//null

4.类型定义:

  • var:对象作用域,与Jacascript中相同
  • let:块级作用域,不允许重复定义
  • const:块级作用域,不可修改,不允许重复定义

5.union联合类型,例如:

var path:string[]|string;
path = 'www';
path = ['http','www'];

6.类型别名,例如:

type PrimitiveArray = Array<string|number|boolean>;
type Callback = ()=>void;

7.外部类型声明,用于提供typescript中未定义的类型使用时不包错,如Jquery中的$。例如:

interface ICustomConsole{
  log(arg:string):void;
}
declare var customConsole:ICustomConsole;

这样便可以使用customConsole而不报错console.log也是这样实现的,其声明存放在declaration files/type defination files文件中,例如lib.d.ts。

8.函数:

  • 有名函数:function greet(name?:string)string{...}//?表示可选
  • 匿名函数:var greet=function(name?:string):string{...}
    -箭头函数:()=>{},例如:var greet=(name:string)=>{...},可用于声明对象类型:var greet:(name:string)=>{...}

9.类:使用class声明,默认属性/方法是public的,构造函数是constructor。

10.接口:使用interface声明。

11.命名空间:使用namespace声明,内部模块,里面的接口,类,变量使用export修饰后外部可见。是typescript本身支持的模块系统,用于隔离内部作用域。

12.模块:外部模块,用于公共代码导入导出(import和export)。

Chap 2 常用工具

前端常用工具如下:

  • 环境:node.js
  • IDE:vscode/atom
  • 代码管理:git/github
  • 包管理:npm/bower,此外,tsd用于定义typescript识别第三方库,如jquery
  • 任务执行:grunt(基于文件)和gulp(基于流)
  • 测试工具:karma/jesmine
  • 持续集成:jenkins/travis CI
  • 脚手架:yeoman

关于模块化工具,有三种规范:

  • CommonJS:定义javascript在不同环境中执行的规范,如非浏览器环境。node.js就是按照这个规范实现的。采用:require引用模块,export导出模块,module定义模块。常用的转换工具有browserify和webpact。
  • AMD:CommonJS定义的规范是同步执行的,对于浏览器和服务端都是如此。但是不同于服务端的本地文件,浏览器需要网络下载,同步执行容易造成浏览器卡顿,因此出现异步模块定义:AMD。模块加载不影响后面语句的执行,加载完成后调用回调函数执行依赖模块的语句。AMD更适合浏览器中运行不同模块javascript。实现的工具有:require.js和curl.js。
  • CMD:Common module defination,国内发展出来的,浏览器实现是seaJS。

AMD和CMD最大的区别是对依赖的执行时机不同,而不是加载的时机或者方式。AMD加载完成后执行回调函数,执行顺序与书写顺序可能不同,所有模块加载完成后执行主逻辑。CMD加载完成依赖后不执行,只是下载,所有模块加载完后执行主逻辑,只有遇到require才执行对应的模块,模块的执行顺序与书写顺序一致。