TypeScript知识笔记---基础

*TypeScript变量声明TypeScript变量的命名规则：变量名可以包含数字和字母。除了下划线_和美元$符号外，不允许使用其他特殊字符，包括空格。变量名不能以数字开头。变量在使用前必须声明，我们可以使用var来声明变量。我们可以使用以下四种方式来声明变量：1.声明变量的类型和初值：var[变量名]:[类型]=value;例如：varuname:string="Runoob";2.声明变量的类型，但没有初始值，变量值将被设置为undefined：var[变量名]:[类型];var[变量名]=值；示例：varuname="Runoob";4。声明一个变量，不设置类型和初始值，类型可以是任意类型，默认初始值为undefined：var[变量名];例子：varuname;例子如下：varuname:string="Runoob";varscore1:number=50;varscore2:number=42.50varsum=score1+score2console.log("name:"+uname)console.log("第一科目成绩："+score1)console.log("第二科目成绩："+score2)console.log("总成绩："+sum)1.基础JavaScript分为两种：原始数据类型（原始数据类型）和引用数据类型（对象类型）。基本数据类型包括：Boolean、Number、String、Null、Undefined，以及ES6中的新类型Symbol和ES10中的新类型BigInt。引用数据类型为Object，如：Function、Array、Date等都属于Object。而TypeScript还有其他类型如元组类型（tuple）、枚举类型（enum）、任意类型（any）、void类型、never类型。1.基本数据类型：⑴BooleanBoolean:letisDone:boolean=false;请注意，使用构造函数Boolean创建的对象不是Boolean：letcreatedByNewBool??ean:boolean=newBoolean(1);//Type'Boolean'isnotassignabletotype'boolean'.//'boolean'是原始类型，但'Boolean'是一个包装器对象。尽可能使用“布尔值”。事实上newBoolean()返回一个布尔对象：letcreatedByNewBool??ean:Boolean=newBoolean(1);直接调用boolean也可以返回boolean类型：letcreatedByBoolean:boolean=Boolean(1);在TypeScript中，boolean是JavaScript中的基本类型，Boolean是JavaScript中的构造函数。其他基本类型（null和undefined除外）相同，这里不再赘述。⑵取值Number：设decLiteral:number=6；lethexLiteral:number=0xf00d;//ES6中的二进制表示法letbinaryLiteral:number=0b1010;//ES6中的八进制表示法letoctaLiteral:number=0o744;letnotANumber:number=NaN;letinfinityNumber:number=Infinity;其中0b1010和0o744是ES6中的二进制和八进制表示，将被编译为十进制数。⑶StringString:letmyName:string='Tom';letmyAge:number=25;//模板字符串letsentence:string=`你好，我叫${myName}。下个月我就满${myAge+1}岁了。`;(4)空值void:functionalertName():void{alert('MynameisTom');}声明一个void类型的变量是没有用的，因为只能赋给undefined和null（只有当--strictNullChecks未指定):letunusable:void=undefined;(5)Null和Undefined：令u:undefined=undefined;让n:null=null;与void的区别在于undefined和null都是子类型的所有类型。也就是说，undefined类型的变量可以赋值给number类型的变量：//这样不会报错letnum:number=undefined;//这样不会报错letu:undefined;letnum:number=你；而voidnumber类型的变量不能赋值给number类型的变量：letu:void;letnum:number=u;//类型'void'不能分配给类型'number'。任意值Any：如果是普通类型，在赋值时不允许改变类型：letmyFavoriteNumber:string='seven';myFavoriteNumber=7;//index.ts(2,1):errorTS2322:类型'number'不能分配给类型'string'。但是如果它是任何类型，则允许分配任何类型。让myFavoriteNumber:any='seven';我的最爱号码=7;允许访问任何值的任何属性：letanyThing:any='hello';console.log(anyThing.myName);console.log(anyThing.myName.firstName);也允许调用任何方法：可以认为，声明一个变量为任意值后，对其进行任意操作，返回内容的类型为任意值。如果一个变量在声明时没有指定它的类型，它将被识别为任何值类型：letsomething;letsomething:any;something='seven';相当于something='seven';something=7;something=7;something.setName('Tom');something.setName('Tom');⑺Tuple元组：数组组合相同类型的对象，而元组组合不同类型的对象。让汤姆：[字符串，数字]=['汤姆'，25];当赋值或访问一个已知索引的元素时，你会得到正确的类型，或者你只能赋值其中之一：lettom:[string,number];tom[0]='Tom';tom[1]=25;tom[0].slice(1);tom[1].toFixed(2);让tom:[string,number];tom[0]='Tom';但是直接初始化或赋值元组类型的变量时，需要提供元组类型中指定的所有项。lettom:[string,number];tom=['Tom',25];//truelettom:[string,number];tom=['Tom'];/error//类型中缺少属性'1''[string]'但在类型'[string,number]'中是必需的。不能给它添加非初始化值：lettom:[string,number];tom=['Tom',25];tom.push('male');tom.push(true);//参数“true”类型的参数不可分配给“string|”类型的参数数字'。⑻枚举Enum：enumDays{Sun,Mon,Tue,Wed,Thu,Fri,Sat};枚举成员会被分配一个从0递增的数字，枚举值会反向映射到枚举名称：enumDays{Sun,Mon,Tue,Wed,Thu,Fri,Sat};console.log(Days["Sun"]===0);//trueconsole.log(Days["Mon"]===1);//trueconsole.log(Days["Tue"]===2);//trueconsole.log(Days["Sat"]===6);//trueconsole.log(Days[0]==="Sun");//trueconsole.log(Days[1]==="Mon");//trueconsole.log(Days[2]==="Tue");//trueconsole.log(Days[6]==="Sat");//true//事实上，上面的例子会被编译为：varDays;(function(Days){Days[Days["Sun"]=0]="太阳";天[天[“星期一”]=1]=“星期一”；天[天["星期二"]=2]="星期二";天[天[“星期三”]=3]=“星期三”；天[天["星期四"]=4]="星期四";天[天["周五"]=5]="周五";天[天["星期六"]=6]="星期六";})(天||(天={}));枚举类型手动赋值：enumDays{Sun=7,Mon=1,Tue,Wed,Thu,Fri,Sat};控制台.log（天数[“太阳”]===7）；//trueconsole.log(Days["Mon"]===1);//trueconsole.log(Days["Tue"]===2);//trueconsole.log(Days["Sat"]===6);//true//手动分配的枚举项可能不是数字，使用类型断言enumDays{Sun=7,Mon,Tue,Wed,Thu,Fri,Sat="S"};//手动分配的枚举项也可以是小数或负数enumDays{Sun=-7,Mon=1.5,Tue,Wed,Thu,Fri,Sat};//常量枚举是由constenum定义的枚举类型。常量枚举与普通枚举的区别在于，它会在编译阶段被删除，编译后不能包含由索引成员组成的数组。//外部枚举（AmbientEnums）是使用declareenum定义的枚举类型。⑼nevertype：nevertype表示永远不存在的值的类型。never类型是任何类型的子类型，并且可以分配给任何类型；但是，没有类型是never类型的子类型或可分配给never类型（除了never本身）。甚至any也不能分配给never。//返回never的函数必须有一个不可到达的端点functionerror(message:string):never{thrownewError(message);}//推断的返回值类型是neverfunctionfail(){returnerror("Somethingfailed");}//返回never的函数一定有一个不可达的终点functioninfiniteLoop():never{while(true){}}⑽数组类型Array:TypeScript中定义数组类型的方式有很多，更加灵活.最简单的方法就是用“类型+方括号”来表示数组：letfibonacci:number[]=[1,1,2,3,5];//数组的项中不允许有其他类型letfibonacci:number[]=[1,'1',2,3,5];//类型'string'不可赋值给类型'number'//数组的一些方法的参数也会约定好定义数组时类型限制：letfibonacci:number[]=[1,1,2,3,5];fibonacci.push('8');//'"8"'类型的参数不可分配给'number'类型的参数。您还可以使用ArrayGenericArray来表示数组：letfibonacci:Array=[1,1,2,3,5];接口也可以用来描述数组：interfaceNumberArray{[index:number]:number;}letfibonacci:NumberArray=[1,1,2,3,5];更常见的做法是使用any表示数组中允许任何类型：interfaceNumberArray{[index:number]:number;}letlist:any[]=['xcatliu',25,{website:'https://www.baidu.com'}];⑾函数类型函数：在JavaScript中，定义函数有两种常见的方式——函数声明（FunctionDeclaration）和函数表达式（FunctionExpression）。函数有输入和输出。要在TypeScript中对其进行约束，需要同时考虑输入和输出。函数声明（FunctionDeclaration）的类型定义比较简单：functionsum(x:number,y:number):number{returnx+y;}注意不允许输入多余的（或少于要求的）参数：functionsum(x:number,y:number):number{returnx+y;}sum(1,2,3);//index.ts(4,1):错误TS2346:提供的参数不匹配任何签名调用target.sum(1);//index.ts(4,1)：错误TS2346：提供的参数与调用目标的任何签名都不匹配。如果我们要写一个函数表达式（FunctionExpression）的定义，可能会这样写：letmySum=function(x:number,y:number):number{returnx+y;};这样可以通过编译，但实际上上面的代码只是定义了等号右边的匿名函数的类型，而等号左边的mySum是通过赋值运算推导出来的。推断。如果我们需要手动给mySum添加类型，应该是这样的：};注意不要将TypeScript中的=>与ES6中的=>混淆。在TypeScript的类型定义中，=>用来表示一个函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。①可选参数：如前所述，不允许输入多余的（或少于要求的）参数。那么如何定义可选参数呢？类似于接口中的可选属性，我们使用?表示可选参数：functionbuildName(firstName:string,lastName?:string){if(lastName){returnfirstName+''+lastName;}else{返回名字；}}lettomcat=buildName('Tom','Cat');lettom=buildName('Tom');需要注意的是，可选参数后面必须跟必填参数。换句话说，可选参数之后不允许有必选参数②参数默认值：在ES6中，我们允许在函数参数中添加默认值，TypeScript会将具有默认值的参数识别为可选参数。不受“可选参数后面必须跟必填参数”的限制：'Cat');lettom=buildName('Tom');③剩余参数：在ES6中，可以使用...rest获取函数中的剩余参数（restparameters）。其实rest就是一个数组。所以我们可以用数组的类型来定义它：functionpush(array:any[],...items:any[]){items.forEach(function(item){array.push(item);});}让一个=[];推(a,1,2,3);④重载：重载允许一个函数在接受不同的数字或类型时处理不同的参数。例如，我们需要实现一个函数reverse，当输入数字123时，输出反转后的数字321，当输入字符串'hello'时，输出反转后的字符串'olleh'。使用联合类型，我们可以这样做：functionreverse(x:number|string):number|字符串|void{if(typeofx==='number'){returnNumber(x.toString().split('').reverse().join(''));}elseif(typeofx==='string'){returnx.split('').reverse().join('');}}