这是我参与「第四届青训营」笔记创作活动的第5天

为什么是TypeScript?

静态类型

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率

js的超集

包含于兼容所有js特性，支持共存
支持渐进式引入和升级

基础数据类型

js中

/*字符串*/ const q = 'string'; /*数字*/ const w = 1; /*布尔值*/ const e = true; /*null*/ const r = null; /*undefined*/ const t = undefined;

ts中

/*字符串*/ const q:string = 'string'; /*数字*/ const w: number = 1; /*布尔值*/ const e:boolean = true; /*null*/ const r:null = null; /*undefined*/ const t:undefined = undefined;

对象类型

const bytedancer:IBytedancer = { jobId:9303245, name:'Lin', sex:'man', age:28, hobby:'swimming' } interface IBytedancer{ /*只读属性：约束属性不可在对象初始化外赋值*/ readonly jobId:number; name:string; sex:'man'|'woman'|'other'; age:number'; /*可选属性：定义该属性可以不存在*/ hobby?:string; /*任意属性：约束所有对象属性都必须是该属性的子类型*/ [key:string]:any; } /*报错：无法分配到“jobId”,因为它是只读属性*/ bytedancer.jobId= 12345; /*成功：任意属性标注下可以添加任意属性*/ bytedancer.plateform = 'date'; /*报错：缺少属性“name”,hobby可缺省*/ const bytedancer2:IBytedancer = { jobId:89757, sex:'woman', age:18, }

函数类型

function add(x,y){ return x+y; } const mult = (x,y)=>x*y; function add(x:number,y:number):number{ return x+y; } const mult:(x:number,y:number)=>number=(x,y)=>x*y;

函数重载

/*对getDate函数进行重载，timestamp为可缺省函数*/ function getDate(type:'string',timestamp?:string):string function getDate(type:'date',timstamp?:string):Date; function getDate(type:'string'|'date',timestamp?:string):Date|string{ const date = new Date(timestamp); return type==='string'?date.toLocaleString():date; } const x = getDate('date');//x:Date const y = getDate('string','2018-01-10');//y:string

interface IGetDate{ (type:'string',timestamp?:string):string; (type:'date',timestamp?:string):Date; (type:'string'|'date',timestamp?:string):Date|string; } /*不能将类型“（type：any，timestamp：any）=>string|Date”分配给类型“IGetDate”。不能将类型“string|Date”分配个类型“string”。不能将类型“Date”分配给类型“string”。 const getDate2:IGetDate = (type,timestamp)=>{ const date = new Date(timestamp); return type ==='string'?date.toLocaleString()：date; } */

Typescript补充类型

/*空类型，表示无赋值*/ type IEmptyFunction = ()=>void; /*任意类型，是所有类型的子类型*/ type IAnyType = any; /*枚举类型：支持枚举值到枚举名的正、反向映射*/ enum EnumExample{ add = '+', mult = '*', } EnumExample['add']==='+'; EnumExample['+']==='add'; enum ECorlor{ Mon,Tue,Wed,Thu,Fri,Sat,Sun}; ECorlor['Mon']===0; ECorlor[0]==='Mon'; /*泛型*/ type INumArr = Array<number>; }

字符串/数字字面量

/*允许指定字符串、数字必须的固定值*/ /*IDomTag必须为html、body、div、span中的其一*/ type IDomTag = 'html'|'body'|'div'|'span'; /*IOddNumber必须为1、3、5、7、9中的其一*/ type IOddNumber = 1|3|5|7|9;

高级类型

类型声明繁琐，存在较多重复改进：

联合类型

IA|IB；联合类型表示一个值可以是几种类型之一

交叉类型

IA&IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效访问为子作用域联合类型+类型保护=自动类型推断

索引类型：关键字【keyof】，其相当于取值对象中的所有key组成的字符串字面量
关键字【in】，其相当于取值字符串字面量中的一种可能，配合泛型p，即表示每个key
关键字【？】，通过设定对象可选选项，即可自动推断出子集类型

函数返回值类型

关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式
关键字【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型

TypeScript入门|青训营笔记