介绍TypeScript的核心原则是对值所具有的结构进行类型检查。有时被称为“鸭式辨型法”或“结构性子类型化”。接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接口初探interfaceLabelledValue{label:string;}functionprintLable(labelledObj:LabelledValu{consollog(labelledOblabe;}letmyObj={size:10,label:'Size10Ojb'}printLable(myOb;只要传入的对象满足上面接口中的条件,就是被允许的!需要注意的是类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也对就可以。可选属性接口里的属性不全都是必需的。interfaceSquareConfig{color?:string;width?:number;}functioncreateSquare(config:SquareConfi:{color:string;area:number}{letnewSquare={color:'white',area:100}if(conficolor){newSquarcolor=conficolor;}if(confiwidt{newSquararea=confiwidth*confiwidth;}returnnewSquare;}letmySquare=createSquare({color:'black'});consollog(mySquar;//{'color':'black','area':100}在可选属性名后加一个?符号可选属性的好处:可以对可能存在的属性进行预定义可以捕获引用了不存在的属性时的错误只读属性一些对象属性只能在创建的时候修改其值。在属性名前用readonly指定只读属性。interfacePoint{readonlyx:number;readonlyy:number;}letp1:Point={x:10,y:20};px=5;//errorTypeScript具有ReadonlyArray类型,确保创建后的数组不能被修改:leta:number[]=[1,23,4]letro:ReadonlyArray=a;ro=12;//errorro.push;//errorro.length=100;//errora=ro;//errora=ro可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的,但是可以用类型断言重写:a=roasnumber[]注意:readonlyVSconst做为变量的话用const,做为属性则用readonly额外的属性检查看如下代码,调用createSquare函数的时候,传入的参数是colour,而不是color,那么会报错。interfaceSquareConfig{color?:string;width?:number;}functioncreateSquare(config:SquareConfi:{color:string;area:number}{letnewSquare={color:'white',area:100}if(conficolor){newSquarcolor=conficolor;}if(confiwidt{newSquararea=confiwidth*confiwidth;}returnnewSquare;}letmySquare=createSquare({colour:'black'});//报错因为对象字面量会被特殊对待而会经过额外属性检查。解决该问题的方法有三个:类型断言letmySquare=createSquare({colour:'black'}asSquareConfi;索引签名interfaceSquareConfig{color?:string;width?:number;[propName:string]:any;}将对象赋值给另一个变量//注意:对象里的属性至少有一个接口中的配置项比如:删除width,就会报错letsquareOptions={colour:'black',width:100};letmySquare=createSquare(squareOptions);函数类型接口除了可以描述普通对象外,还能描述函数类型。//定义函数类型接口interfaceSearchFn{(sourse:string,subString:strin:boolean;}//使用letmySearch:SearchFn;mySearch=function(sourse:string,subString:strin{letres=sourssearch(subStrinreturnres>-1}mySearch=function(src:string,sub:strin:boolean{letres=srsearch(su;returnres>-1;}//类型推断mySearch=function(src,su{letres=srsearch(su;returnres>-1;}可索引的类型有两种索引签名:字符串索引数字索引interfaceNumberArray{[index:number]:number}>当使用number来索引时,Javascript会将它转换成string再去索引对象索引签名可以设置只读类类型实现接口:implements关键字interfaceClockInterface{currentTime:Date;}classClockimplementsClockInterface{currentTime:Date;constructor(h:number,m:number){}}描述一个方法:interfaceClockInterface{currentTime:Date;setTime(d:Dat;}classClockimplementsClockInterface{currentTime:Date;setTime(d:Dat{this.currentTime=d;}constructor(h:number,m:number){}}类静态部分与实例部分的区别interfaceClockInterface{currentTime:Date;getTime(h:number,m:number):any;}interfaceClockConstructor{new(h:number,m:number):any;}classClockimplementsClockInterface{currentTime=newDate();getTime(){}constructor(h:number,m:number){}}functioncreateClock(C:ClockConstructor,h:number,m:number){returnnewC(h,;}letclock=createClock(Clock,13,1;继承接口interfaceShape{color:string;}interfacePenStroke{penWidth:number;}interfaceSquareextendsShape,PenStroke{sideLength:number;}letsquare={};//类型断言squarcolor='blue';squarpenWidth=10;squarPenStroke=0;混合类型函数类型的interface加上对象类型的interfaceinterfaceCounter{(start:number):string;interval:number;reset():void;}functiongetCounter():Counter{letcounter=function(start:number){};counter.interval=1;counter.reset=function(){};returncounter;}letc=getCounter();c(10);reset();interval=0;
函数类型函数的注解方式:函数声明方式:functionfn(a:number,b:number):number{returna+b}函数表达式注解方式://采用了推断类型写法letfn:(a:number,b:number)=>{}=function(a,{returna:1}可选参数和默认参数参数后加?符号,代表可选参数functionbuildName(firstName:string,lastName?:strin{returnfirstName+''+lastName;}参数直接提供默认值=,代表默认参数functionbuildName2(firstName:string,lastName='smith'){returnfirstName+''+lastName;}剩余参数你想同时操作多个参数,或者你不知道会有多少参数传递进来,那么你可以使用arguments来访问所有传入的参数。使用...符号,代表剩余参数functionbuildName3(firstName:string,...restOfName:string[]){returnfirstName+''+restOfNamjoin('');}函数的重载意义:表意更清楚functionreverse(x:number):number;functionreverse(x:strin:string;functionreverse(x:string|number){if(typeofx==='string'){returnx.split('').reverse().join('')}if(typeofx==='number'){returnNumber(x.toString().split('').reverse().join(''))}}
函数
介绍软件工程中,我们不仅需要创建一致的API,同时还要考虑可重用性。可以使用泛型来创建可以重用的组件,可以支持多种类型的数据。初识泛型定义泛型:functionidentity(arg:T):T{returnarg;}T:类型变量这样我们可以知道参数类型与返回值类型是相同的使用泛型:方法letoutput=identity('mystring')方法letoutput=identity('mystring')使用泛型变量//写法functionloggingIdentity(arg:T[]):T[]{returnarg;}//写法functionloggingIdentity1(arg:Array):Array{returnarg;}泛型类型泛型函数:functionidentity(arg:T):T{returnarg;}//可以使用不同的泛型参数名,只要数量上和使用形式上能对应就好letmyIdentity:(arg:U):U=>U=identity;使用带有调用签名的对象字面量来定义泛型函数:functionidentity(arg:T):T{returnarg;}letmyIdentity:{(arg:U):U}=identity;引入泛型接口:interfaceGenericIdentityFn{(arg:T):T;}functionidentity(arg:T):T{returnarg;}letmyIdentity:GenericIdentityFn=identity;letmyIdentity2:{(arg:U):U}=identity;最终泛型写法:interfaceGenericIdentityFn{(arg:T):T;}functionidentity(arg:T):T{returnarg;}letmyIdentity:GenericIdentityFn=identity;泛型约束如果没有类型约束,那么loggingIdentity该函数的参数arg就不能使用他没有的属性lengthinterfaceLengthwise{length:nubmer;}functionloggingIdentity(arg:T):T{consollog(arlengtreturnarg;}
接口
布尔值letisDone:boolean=false数字TypeScript中的所有数字都是浮点数。支持十进制、十六进制字面量,还有ES2015中的二进制和八进制字面量。letcount:number=10字符串letname:string='lyb'数组写法元素类型[]:letlist:number[]=[1,3,5]写法数组类型<元素类型>:letlist:Array=[1,3,5]元组Tuple元组允许表示一个已知的元素数量和类型的数组,各元素类型不必相同。lettuple:[string,number];tuple=['hello',520]//正确tuple2=[520,'hello']//错误当访问一个越界的元素,会使用联合类型替代:x='world';//为什么我的编辑器报错???consollog(x.toString());//为什么我的编辑器报错???枚举enum可以为一组数值赋予友好的名字。默认情况下:从0开始编号:enumColor{Red,Green,Blue}letc:Color=Color.Green;//1手动指定数值的情况下:enumColor{Red=1,Green=4,Blue}letc:Color=Color.Blue;//5枚举类型提供的一个便利是你可以得到由枚举类型的值得到他的名字:enumColor{Red=1,Green=4,Blue}letcolorName:string=Color;//Green任意值any为那些在编程阶段不确定的变量指定一个类型。letlist1:any=4;letlist2:any='lyb';letlist3:any=[1,2,3];letlist4:any[]=[1,true,'free']空值void在某种程度上,void类型与any类型相反。表示没有任何类型。当一个函数没有返回值时,他的返回值类型是void。constwarnUser=():void=>{alert('thisismywarningmessage~')}leta:void=undefinednull和undefinedtypescript中,null和undefined由自己的类型,分别是null和undefined。letu:undefined=undefined;letn:null=null;默认情况下:null和undefined是所有类型的子类型,你可以把null和undefined赋值给number类型的变量。永不存在的类型nevernever类型是那些总是会抛出异常或根本不会有返回值的函数表达式或箭头函数表达式的返回值类型。never是所有类型的子类型,可以赋值给任何类型。//返回never的函数必须存在无法达到的终点functionerror(message:strin:never{thrownewError(messag;}//推断的返回值类型是neverfunctionfail(){returnerror('somethingfailed');}//返回never的函数必须存在无法达到的终点functioninfiniteLoop():never{while(tru{}}类型断言类型断言好比其他语言中的类型转换,没有运行时的影响,只是在编译阶段起作用写法一letsomeValue:any='thisisastring';letsvlength:number=(someValu.length;写法二letsvlength2:number=(someValueasstrilength;consollog(svlength;总结:两种写法是等价的。在TypeScript中使用JSX时,只有as语法断言是被允许的。
文章为作者独立观点,不代表股票交易接口观点