泉州白癜风医院 http://pf.39.net/bdfyy/bdflx
前言

反思了现在为什么越来越多的公司开始使用TypeScript开发应用，而大部分小厂还是热衷javascript，在多人协作的团队，代码的可读性、结构清晰、低耦合、易扩展显的尤为重要。

JavaScript

TypeScript是JavaScript的一个超集，它对JavaScript做了一系列的增强，包括增加了静态类型、接口、类、泛型、方法重载等。有了javascipt的功底，如果还有其他静态类型语言如java、dart等的基础，那么学习TypeScript也会更加容易上手。

JavaScript是动态类型语言，在代码编译阶段不会对变量进行类型检测，从而增加了代码执行阶段的错误概率，这也是为什么前端程序员频繁使用console.log进行调试。在不同类型变量的赋值时，js还会自动进行类型转换，从而带来代码缺陷的可能性进一步增加。JavaScript没有命名空间，需要手动创建命名空间，来进行模块化。并且，JavaScript允许同名函数的重复定义，后定义的会覆盖之前定义的函数，这也给大型协同开发的项目带来很多麻烦。

TypeScript简介

TypeScript是静态类型语言，是一种面向对象的编程语言，它通过类型注解提供编译时的静态类型检查。TypeScript解决javascript上述的一系列问题：包括在代码编译阶段的变量的类型检测，会提前暴露潜在的类型错误问题。并且在代码执行阶段，不允许不同类型变量之间的赋值。TypeScript的类型注解，赋予了IDE更强的代码补全能力，更人性化的代码提示，从而给开发带来更多的便利之处。TypeScript还增加了模块类型，自带命名空间，方便了大型应用的模块化开发。

特性数据类型基础数据类型包括：Boolean、Number、String、Array、Enum、Any、Unknown、Tuple、Void、Null、Undefined、Never。Enum枚举：编程要避免使用硬编码，配置化的代码可以让代码更易维护。//数字枚举在不设置默认值的情况下，默认第一个值为0，其他依次自增长enumTASK_STATUS{UNPLAYED,ONGOING,FINISHED,OBSOLETE}letstatus:TASK_STATUS=TASK_STATUS.UNPLAYED;//0Any类型：不建议使用。Any类型为顶层类型，所有类型都可以被视为any类型，使用Any也就等同于让TypeScript的类型校验机制失效。Unknown类型：优先考虑用Unknown代替Any。Unknown类型也是顶层类型，它可以接收任何类型，但它与Any的区别在于，它首次赋值后就确定了数据类型，不允许变量的数据类型进行二次变更。Tuple元组：支持数组内存储不同数据类型的元素。

lettuple:[string,boolean];tuple=["ghostwang",true];Void：当函数没有返回值的场景下，通常将函数的返回值类型设置为void。类型注解

TypeScript通过类型注解提供编译时的静态类型检查，在:冒号后面注明变量的类型即可。

conststr:string=ghostwang;constcount:number=10;接口

面向对象编程，实现程序解耦的关键就是接口，它只定义属性和方法，不涉及任何具体的实现细节。接口是对实体或行为进行抽象，它是让复杂的逻辑抽离变的更加可扩展的关键。

interfaceCar{brand:string;getBrand():String;}classToyotaimplementsCar{constructor(privatename:string){getBrand(){return品牌:+name;}}}类类除了包括属性和方法、继承、getter和setter方法之外，还新增了私有字段。私有字段不能在包含的类之外访问，但是可以从一个公有的getter方法中拿到。属性和方法

classCommonPerson{constructor(gender:string){this.gender=gender;}staticname:string="ghostwang";gender:string;getName(){returnthis.name;}//成员方法getGender(){returnGender:+this.gender;}}constp=newPerson("男");p.name//ghostwangp.getGender//男getter和setter

classPerson{private_name:string;getgetName():string{returnthis._name;}setsetName(name:string){this._name=name;}}letperson=newPerson(ghostwang);person.getName();//ghostwangperson.setName(mango);console.log(person.getName());//mango继承

classPerson{name:string;constructor(nameStr:string){this.name=nameStr;}walk(distance:number=0){console.log(`{this.name}walked{distance}米`);}}classGhostWangextendsPerson{constructor(nameStr:string){//执行基类的构造函数，把参数传进去super(nameStr);}walk(distance=5){super.walk(distance);}}constmongo=newGhostWang(mongo);mongo.move();//输出：mongowalked5米

私有字段

私有字段以#字符开头。私有字段不能在包含的类之外访问。

classPerson{#name:string;constructor(name:string){this.#name=name;}hello(){console.log(`{this.#name}sayhello!`);}}letperson=newPerson(ghostwang);person.#name;//报错泛型

使用泛型来创建的组件可复用和易扩展性要更好，因为泛型会保留参数类型。泛型可以应用于接口、类、变量：

泛型接口

interfaceidentityFnT{(arg:T):T;}泛型类

classGenericNumberT{zeroValue:T;add:(x:T,y:T)=T;}letmyGenericNumber=newGenericNumbernumber();myGenericNumber.zeroValue=0;myGenericNumber.add=function(x,y){returnx+y;};泛型变量

使用大写字母A-Z定义的类型变量都属于泛型，常见泛型变量如下：

T（Type）：表示一个TypeScript类型K（Key）：表示对象中的键类型V（Value）：表示对象中的值类型E（Element）：表示元素类型交叉类型

交叉类型就是将多个类型合并为一个类型。通过运算符定义。如下示例中，将Person类型和Company类型合并后，生成了新的类型Staff，该类型同时具备这两种类型的所有成员。

interfacePerson{name:string;gender:string;}interfaceCompany{