当前位置: 首页 > Web前端 > JavaScript

Y分钟TypeScript

时间:2023-03-27 18:12:52 JavaScript

源码下载:learntypescript-cn.tsTypeScript是一种专为开发大型JavaScript应用程序而设计的语言。TypeScript向JavaScript添加了通用概念,例如类、模块、接口、泛型和静态类型(可选)。它是JavaScript的超集:所有JavaScript代码都是有效的TypeScript代码,因此任何JavaScript项目都可以无缝导入TypeScript,TypeScript编译器最终会将TypeScript代码编译成JavaScript代码。本文仅关注TypeScript区别于JavaScript的附加语法。测试TypeScript编译器,你可以去Playground写代码,它会自动将你写的TypeScript代码编译成JavaScript代码,并立即显示在右边。//TypeScript有三种基本类型,boolean类型,numeric类型,string类型letisDone:boolean=false;letlines:number=42;letname:string='Anders';//如果不知道什么类型是的,你可以使用“任何”(任意)类型letnotSure:any=4;notSure='可以重新赋值,转换为字符串类型';不确定=假;//也可以重新定义为布尔类型//使用const关键字将一个字面量修改为常量constnumLivesForCat=9;numLivesForCat=1;//常量不能被重新赋值,所以这里会报错//Collection在TypeScript中有两种表示,一种是类型化数组,另一种是泛型数组letlist:number[]=[1,2,3];//或者,使用通用数组letlist:Array=[1,2,3];//enumerationenumColor{Red,Green,Blue}letc:Color=Color.Green;//"void”结尾,用于表示函数不返回任何值的特殊情况citizens”(一等公民),支持使用lambda胖箭头表达式和类型推断//下面五个函数f1-f5是等价的,TypeScript编译器会把它们编译成相同的JavaScript代码(可以去Playgroundverify)//一般函数letf1=function(i:number):number{returni*i;};//根据返回值推断函数返回类型letf2=function(i:number){returni*i;};//粗箭头表达式letf3=(i:number):number=>{returni*我;};//从返回值推断返回类型的粗箭头表达式letf4=(i:number)=>{returni*i;};//从返回值推断返回类型的胖箭头表达式,省略花括号的同时,return关键字可以同时省略letf5=(i:number)=>i*i;//接口是结构化的,任何具有接口声明的所有属性的对象都与接口兼容interfacePerson{name:string;//使用”?”指示该属性是非必需属性age?:number;//Functionmove():void;}//实现了“Person”接口的对象,当它带有“name”属性和“move”方法时,可以认为是一个“Person”letp:Person={名称:'鲍比',移动:()=>{}};//具有可选属性的对象letvalidPerson:Person={name:'Bobby',age:42,move:()=>{}};//因为对象的“age”属性不是“number”类型,所以这个isnota"Person"letinvalidPerson:Person={name:'Bobby',age:true};//接口也可以描述函数接口的类型SearchFunc{(source:string,subString:string):boolean;}//参数名不重要,参数类型最重要letmySearch:SearchFunc;mySearch=function(src:string,sub:string){returnsrc.search(sub)!==-1;};//类-默认情况下成员访问是公共的(public)classPoint{//成员属性x:number;//构造函数-在构造函数中使用被public/private关键字修饰的变量会声明为类的成员属性//在下面的例子中,y会像x一样被声明定义为一个类成员属性,不需要额外的代码//声明的时候,也支持指定一个默认值constructor(x:number,publicy:number=0){这个.x=x;}//成员函数dist(){returnMath.sqrt(this.x*this.x+this.y*this.y);}//静态成员staticorigin=newPoint(0,0);}letp1=newPoint(10,20);letp2=newPoint(25);//y是构造函数中指定的默认值:0//inheritclassPoint3DextendsPoint{constructor(x:number,y:number,publicz:number=0){super(x,y);//必须显式调用父类的构造函数}//重写父类中的dist()函数dist(){letd=super.dist();返回Math.sqrt(d*d+this.z*this.z);}}//模块,”。”symbol可以用作子模块分隔符moduleGeometry{exportclassSquare{constructor(publicsideLength:number=0){}area(){returnMath.pow(this.sideLength,2);}}}lets1=newGeometry.Square(5);//为模块创建本地别名importG=Geometry;lets2=newG.Square(10);//Generic//classclassTuple{constructor(publicitem1:T1,publicitem2:T2){}}//接口接口Pair{item1:T;item2:T;}//函数letpairToTuple=function(p:Pair){returnnewTuple(p.item1,p.item2);};lettuple=pairToTuple({item1:'hello',item2:'world'});//参考定义文件/////模板字符串(使用反引号的字符串)//嵌入变量的模板字符串letname='Tyrone';letgreeting=`Hi${name},howareyou?`;//多行内容的模板字符串letmultiline=`Thisisanexampleofamultilinestring`;参考TypeScript官方网站TypeScriptLanguageSpecification(pdf)AndersHejlsberg-IntroductiontoTypeScriptGitHubSourceDefinitelyTyped-TypeDefinitionRepository有什么建议吗?还是发现了什么不对?在Github上打开一个问题,或者发起一个pullrequest!最初由PhilippeVlérick撰写,由0位好心人修改?2022PhilippeVlérick翻译:ShawnZhang本作品已获得CCBY-SA3.0许可。