写在前面

本篇文章是我初学typescript的笔记，希望可以为看到的朋友提供帮助。

推荐视频：/video/av38379328/?p=14&t=522

一、ts中的数据类型

ts必须指定数据类型（给人理解将数据类型分成3种） 1.js有的类型boolean类型、number类型、string类型、array类型、undefined、null2.ts多出的类型tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）3.特别的类型void类型（没有任何类型）表示定义方法没有返回值never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值这意味着声明never变量只能被never类型所赋值

// 第一种定义array类型方法var arr1:number[] = [1,2,3]// 第二种定义array类型方法var arr2:Array<number> = [11,22,33] // 定义元组类型的方法let arr3:[number,string] = [111,'111']// 定义enum枚举类型方法（在程序中用自然语言和计算机状态联系起来，方便理解）enum Flag {success=1,error=2}let s:Flag = Flag.successconsole.log(s)enum Color {red,blue,orange}let num:Color = Color.redconsole.log(num)// 定义any任意类型方法var num1:any = 123num1 = truevar obox:any = document.getElementById('box')obox.style.color = 'red'// undefined类型var num2:number | undefinedconsole.log(num2)// void类型,函数没有返回值function run():void{console.log('run')}function run1():number{return 123}// never类型定义方法var a:undefineda = undefinedvar b:nullb = null// var c:never// c = (()=>{//throw new Error('错误')// })()

二、函数

1.函数的定义：

// es5函数声明function run3(){return 'run'}// es5匿名函数var run4 = function(){return 'run'}// ts函数声明function run5():string{return 'run'}// ts匿名函数var run6 = function():number{return 123}// ts中定义方法传参function getInfo(name:string,age:number):string{return 'info'+`$(name)---$(age)`}var getInfo1 = function(name:string,age:number):string{return 'info'+`$(name)---$(age)`}// 没有返回值的方法function getInfo2():void{console.log(123)}

2.方法可选参数，在参数后面加？变为可选参数，可选参数必须配置到参数的最后面

function getInfo3(name:string,age?:number):string{if(age){return 'info'+`$(name)---$(age)`}else{return 'info'+`$(name)---年龄保密`}}

3.默认参数 es6和ts都可以设置默认参数

function getInfo4(name:string,age:number=20):string{if(age){return 'info'+`$(name)---$(age)`}else{return 'info'+`$(name)---年龄保密`}}getInfo4('张三',30)

4.剩余参数

function sum(a:number,b:number,c:number):number{return a+b+c}sum(1,2,3)// 三点运算符接收传过来的值function sum1(...result:number[]):number{var sum = 0for(var i=0;i<result.length;i++){sum += result[i]}return sum}sum1(1,2,3)function sum2(a:number,...result:number[]):number{var sum = 0for(var i=0;i<result.length;i++){sum += result[i]}return a + sum}sum1(1,2,3)

5.函数重载

// java重载是指两个或两个以上同名函数，但是函数参数不同，这时候会出现函数重载的情况// ts重载是指通过一个函数提供多个函数定义来试下多种功能的目的function getInfo5(name:string):stringfunction getInfo5(age:number):numberfunction getInfo5(str:any):any{if(typeof str == 'string'){return str}else{return str}}alert(getInfo5(123))// 方法重载可以和函数选择传参一起用

6.箭头函数

setTimeout(function(){alert('run')},1000)setTimeout(()=>{alert('run')},1000)

三、es5中的类

function Person(){this.name='zhangsan'this.age=20}var p = new Person()

构造函数和原型链添加方法

function Person(){this.name='zhangsan'this.age=20this.run = function(){alert('yundong')}}Person.prototype.sex = '男'Person.prototype.work = function(){alert('work')}var p = new Person()

类里面的静态方法

function Person(){this.name='zhangsan'this.age=20this.run = function(){alert('yundong')}}Person.getInfo = function(){alert('我是静态方法')}Person.prototype.sex = '男'Person.prototype.work = function(){alert('work')}var p = new Person()// 调用静态方法Person.getInfo()

es5里面的继承 原型链加对象冒充组合的方式

// 对象冒充可以实现构造函数的继承，但是没办法实现构造函数的继承function Web(){Person.call(this)}var w = new Web() //5. 改善Web.prototype = Person.prototypevar w1 = new Web()

6.原型链继承时如果需要传参，那么实例化子类无法传参

function Web1(name,age){}Web.prototype = new Person()// 改善function Web2(name,age){Person.call(this,name,age)}Web.prototype = new Person()// 想办法继承原型链上和构造函数的方法

四、ts中的类

//1.function Person1(name,age){this.name='zhangsan'this.age=20this.run = function(){alert('yundong')}}Person.prototype.sex = '男'Person.prototype.work = function(){alert('work')}var p = new Person1('zhangsan')//2.class Person3{name:string //属性，前面省略了public关键词constructor(name:string){ //构造函数 实例化类的时候触发的函数this.name = name}getName():string{return this.name}setName(name:string):void{this.name=name}}var p1 = new Person3('zhangsan')// ts实现继承class Person4{name:stringconstructor(name:string){this.name=name}run():string{return `$(this.name)在运动`} }// var p2=new Person4('wangwu')// alert(p2.run())class Web4 extends Person4{constructor(name:string){super(name)}}var w = new Web4()alert(w.run())// 3.类里面的修饰符，ts三种：public（公类、子类、类外面） protected（类外面不能访问） private（子类、类外面不能访问）// 4.静态属性 静态方法class Person{name:stringconstructor(name:string){this.name = name}run(){alert('这是实例方法')}static print(){alert('这是静态方法')// 静态方法没办法直接调用类里面的属性}}var p = new Person('zhangsan')p.run()Person.print()

五、ts中的多态

// 父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现多态属于继承class Animal{name:stringconstructor(name:string){this.name = name}eat(){console.log('吃的方法')}}class Dog extends Animal{constructor(name:string){super(name)}eat(){return this.name+'吃肉'}}class Cat extends Animal{constructor(name:string){super(name)}eat(){return this.name+'吃粮食'}}

六、ts中的抽象方法和抽象类

// 01.抽象类是提供其他类继承的基类，不能直接被实例化// 02.用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现// 03.abstract抽象方法只能在抽象类中// 04.抽象类和抽象方法用来定义标准：例如，要求Animal类的子类必须有eat方法abstract class Animal{name:stringconstructor(name:string){this.name = name}abstract eat():any}class Dog extends Animal{constructor(name:any){super(name)}// 抽象类的子类必须实现抽象类里面的方法eat(){console.log(this.name+'吃肉')}}var d = new Dog('xiaogou')d.eat()

七、ts中的接口

接口的作用：在面向对象编程中，接口是一种规范的定义，它定义行为和动作的规范。

在程序设计里面，接口起到一定的限制和规范作用。接口定义某一些类所遵守的规范，接口不关心这些类的内部状态数据，也不关心类里面方法的实现细节

它只规定这批类中必须提供某些方法，提供的这些方法就可以满足某些需求。

ts的接口同时增加更灵活的接口类型，包括属性，函数，可索引和类等。

1.属性类接口

// 对json的约束// function printLabel(label:string):void{//console.log('printLable')// }// printLabel('hahah')// 自定义方法传入参数对json进行约束function printLable(labelInfo:{lable:string}):void{console.log('printLabel')}printLable({lable:'string'})

2.定义接口对参数进行约束

interface FullName{firstName:string;secondName:string}function printName(name:FullName){console.log(name.firstName+'---'+name.secondName)}var obj = {firstName:'zhang',secondName:'san'}printName(obj)

3.接口：可选属性

interface FullName{firstName:string;secondName?:string// 添加？号之后 secondName可传可不传}function getName(name:FullName){console.log(name.firstName+'---'+name.secondName)}var obj = {firstName:'zhang',secondName:'san'}getName(obj)

ajax接口实践

interface Config{type:stringurl:stringdata?:stringdataType:string}function ajax(config:Config){var xhr = new XMLHttpRequest()xhr.open(config.type,config.url,true)xhr.send(config.data)xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log('success')}}}ajax({type:'get'url:'www://http:'dataType:'json'})

6.函数类型接口

// 加密的函数类型接口interface encrypt{(key:string,value:string):string;}var md5:encrypt=function(key:string,value:string):string{return key+value}console.log(md5('name','zhangsan'))

7.可索引接口 数组、对象的约束，不常用

// var arr:number[]=[1,2,3]// var arr1:Array<string>=['111','222','333']interface UserArr{[index:number]:string}var arr:UserArr=['111','222']console.log(arr[0])// 对象的约束interface UserObj{[index:string]:string}var arr1:UserObj={name:'张三'}

8.类类型接口

// 对类的约束，和抽象类有点像interface Animal{name:stringeat(str:string):void;}class Dog implements Animal{name:stringconstructor(name:string){this.name = name}eat(){console.log(this.name+'吃粮食')}}var d = new Dog('小黑')

9.接口扩展

// 接口可以继承接口interface Animal{eat():void}interface Person extends Animal{work():void}class Web implements Person{public name:stringconstructor(name:string){this.name = name}eat(){console.log(this.name+'喜欢吃馒头')}work(){console.log(this.name+'喜欢敲代码')}}interface Animal{eat():void}interface Person extends Animal{work():void}class Programmer{public name:stringconstructor(name:string){this.name = name}coding(code:string){console.log(this.name+code)}}class Web extends Programmer implements Person{constructor(name:string){super(name)this.name = name}eat(){console.log(this.name+'喜欢吃馒头')}work(){console.log(this.name+'喜欢敲代码')}}

八、ts中的泛型

// 1泛型的定义// 泛型：在软件工程中，我们不仅要创建一致的定义良好的api，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，还能支持未来的数据类型// 在C#和Java这种语言中，可使用泛型来创建可重用的组件，一个组件支持多种类型的数据// 2泛型函数// T表示泛型，具体什么类型调用这个方法的时候决定的function getData<T>(value:T):T{return value}getData<number>(123)// 3泛型类// 比如有个最小堆算法，需要同时支持返回数字和字符串两种类型// class Minclass{//public list:number[]=[]//add(num){// this.list.push(num)//}//min():number{// var minNum=this.list[0]// for(var i=0;i<this.list.length;i++){// if(minNum>this.list[i]){// minNum = this.list[i]// }// }// return minNum//}// }// var m = new Minclass()// m.add(2)class Minclass<T>{public list:T[]=[]add(value:T):void{this.list.push(value)}min():T{var minNum=this.list[0]for(var i=0;i<this.list.length;i++){if(minNum>this.list[i]){minNum = this.list[i]}}return minNum}}var m = new Minclass()m.add(2)// 4泛型接口// 函数类型接口// interface Configfn{//(value1:string,value2:string):string;// }// var setData:Configfn=function(value1:string,value2:string):string{//return value1+value2// }// 泛型接口interface Configfn{<T>(value:T):T;}var setData:Configfn=function<T>(value:T):T{return value}

写在最后

个人感觉ts要比js严格规范得多，一个语言越严谨，那么可以实现的功能就越强大。不断学习，不断成长。