写在前面
本篇文章是我初学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中的类
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严格规范得多,一个语言越严谨,那么可以实现的功能就越强大。不断学习,不断成长。