TypeScript是由微软开发的javascript开发语言。
它是javascript的高级语法定义。
使用,可以在vs 里创建typeScript项目。
或npm install -g typescript
tsc XX.ts //编译ts 成js文件。
也可以在webstorm里创建项目再创建typescript文件,编辑器会自动检测语法并生成对应的js文件。
-------------------------------------------------
基本类型
boolean
number
string
array
enum
any
void
使用:
var bool:boolean=false; var num:number=33; var name:string="star";//特定类型的数组:type[] Array<type> var arr:number[]=[1,2,3]; var arr2:Array<number>=[1,2,3]//枚举 enum color {red,blue}; //.值来获取此值的下标,默认从0开始 var c:color=color.blue; //枚举[]访问它的下标值 var aa:string=color[0];//给值设置下标,默认从0开始可以指定如从1开始 enum color1 {red=1,blue=2}; var c1:color1=color1.red;//any 随意类型,可以给任意类型的值 var a:any=3; a="star"; var cs:any[]=[1,"star",{}];//设置函数无返回值 function fn():void{ console.log('a'); } //设置返回值类型 function fn2():number{ return 1; }TypeScript定义了数据类型,在定义变量时可在变量名后:type来指定其类型。一但指定赋值时就必需为符合的类型。函数参数也可定义类型(name:star)也可以定义默认值(age:number=1)类的定义-----------------// class XX{}创建类 括号内不是以对象方式来书写的 //属性以;结束 //构造函数construcotr(){} //定义方法XX(){} //方法或函数在定义时可以为参数定义默认的值。 // age:类型=默认值 class Person{ name:string;//定义属性 age:number; constructor(name:string,age:number=20){ this.name=name; this.age=age; } print(){ console.log(this.name+this.age) } }class 类名{主体}主体内容必不是对象的形式。定义属性XX:type;定义构造函数用到constructor关键字这后是函数参数和函数内容方法的定义直接方法名(){}不需要js 里的function 关键字了。方法内可用this来引用当前对象。var a=new Person("star",23); a.print();创建实例对象用new 和js是一样的。//继承 //class XX extend child {} //子类有父类的所有属性和方法,子类可以自定义构造函数, //构造函数内可用super来调用父类的构造函数并传递值来修改当前属性。 //super.XX也可来调用父类的方法 class Student extends Person{ school:string; constructor(name:string,age:number,school:string){ this.school=school; super(name,age); } print(){ console.log(this.name+this.age+this.school); } } //实例化new XX() var b=new Student("cc",33,'school'); b.print();类的继承,用extends 父类{}继承类有父类的所有属性和方法,也可以添加属于自己的属性和方法。还可以定义相同的类或构造函数来覆盖父类的。类中用super来引用父类,super()默认引用父类的构造函数。super.Xx()引用父类的某方法。//访问修饰符 public private //未定义的属性修饰符默认是public //当定义属性为private 私有的时,它只能在类内访问如构造函数方法中获取和修改。 //用实例对象.XX来访问会报错 class People{ private name:string; age:number; constructor(name:string,age:number){ this.name=name; this.age=age; } print(){ console.log(this.name+this.age); } } var cc=new People('star',32); //私有的类个无法访问 //cc.name='b'; cc.print();
默认类的属性是public 全局访问。
当用private定义时,此属性只能在类内方法和修改。
当用实例对象.XX来访问时会报错。
//封装 class Hello{ private _name:string; get name():string{ return this._name; } set name(newname:string){ this._name=newname; } } var a=new Hello(); a.name='star'; console.log(a.name)
和net 中是一样的。
定义一个私有变量,
用get set来获取和修改变量。
get set 定义的是函数,函数名是一样的.
get set 在webstorm中默认是不可用的。
需要在设置里的languages & frameworks下的typescript内设置command line options:为-target ES5 才可用。
//javascript 中的函数 function add(a,b){ console.log(a+b); return a+b; } //指定函数的参数类型和返回值类型 //XX?:type 表示可选 参数 function addb(a:number,b?:number):number{ console.log(a+b); if(b){ return a; }else{ return a+b; } } addb(10,20); addb(10); //addb(10,30,20); 当参数多或少时会报错 //参数默认值 //调用时可以不传递默认参数,但参数多了会报错 function numadd(a:number,b:number=1){ console.log(a+b); return a+b; } numadd(1,2); numadd(1); //numadd(1,2,3); //可变参数,参数的类型需要指定类型 //多个参数需要和指定的类型一样。 //写法在参数前加上...类型是数组的。 //用参数定义名来获取可变参数数组。 //可变参数定义需放到最后。 function numaddb(num:number,...nums:number[]){ console.log(num+","+nums.join(' ')); } numaddb(1,2,3,4,5); numaddb(1,3,3,4); var mames={ name:["a","b","c","d"], getname:function(){ var i=Math.floor(Math.random()*4); return this.names[i]; } }
可为函数的参数指定类型:type
还可指定返回类型():void ():type
函数参数可设置默认值 (name:type=1)
函数参数可选传递(name?type)
函数参数可不定传递(num:number,...nums:number[])
也就是指定一个数组参数并定义类型前加上...
引用时用nums来获取参数数组
//指定参数对象的属性和类型 function fn(obj:{name:string}){ console.log(obj.name); } fn({name:'star'}); //interface 创建接口 //指定接口属性和类型 interface nameobj{ name:string; } //函数参数可以指定为接口类型 function fn1(obj:nameobj){ console.log(obj.name); } fn1({name:'cc'})//传递时参数就需要按接口属性和类型要求 //接口可选属性 加上? interface usb{ name:string; age?:number; } function fn2(obj:usb){ console.log(obj.name+obj.age); } fn2({name:'cc'}); //接口方法类型 定义方法的参数类型和返回类型 interface push{ (name:string,age:number):string; } //使用时需指定变量的接口赋值的函数需要符合要求 var su:push=function(name:string,age:number):string{ return name+age; } var result=su('cc',32); console.log(result); //接口数组 类型 interface subarr{ [index:number]:string; } var cc:subarr=["a","b"]; //接口 定义用于类的实现 interface cl{ time:Date; settime(d:Date); } //类的实现用implements //接口内定义的属性和方法都需要在类中实现的。 class Ch implements cl{ time:Date; constructor(time:Date){ this.time=time; } settime(time:Date){ this.time=time; } } //接口继承 混合类型 interface shape{ color:string; } interface stroke{ width:number; } //接口通过extends 实现多继承 。 interface square extends shape,stroke{ length:number; } //定义变量时用<>{}; 或用:XX var objc=<square>{}; objc.color="red"; objc.length=10; objc.width=10; //当设置变量类型为接口时且需赋值。 // 那么值必须按要求写,全部必写。也不少参数和多参数。 var cd:square={color:"cc",length:22,width:33}; var bd:square; //混合类型 interface cou{ inter:number; reset():void; (num:number):void; } var cbc:cou; cbc.inter=33; cbc.reset=function(){ }接口:
可用来定义一组规范。
内容用;结束。
接口可当做类型,供变量或参数用。变量或参数赋值传递时就需要按要求设置了。
接口属性可用?来设置可不传递
当定义类型为接口,那么值必须按要求设置,不可多也不可少。
接口定义函数:
指定参数类型和返回类型
接口定义方法和函数一样只是多了个方法名
函数实现按要求
接口数组 :指定数组类型
class classname implements interfacename{}
类需要实现接口的所有属性。
接口继承
interface name extends a,b,c
也是用extends关键字
接口实现包括继承的接口也要实现。
//--------------------------泛
function Hello(name:string):string{ return name; } //泛类型<T> T可以随意指定 //指定函数为泛类型,参数和返回值也一样 function fn<T>(arg:T):T{ return arg; } //使用时指定类型为字符串 那么它的参数和返回就都需是字符串。 var a=fn<string>("star"); console.log(a); //泛型参数是根据传递的类型来决定它的属性的。 //传递的是数组形参数,它是有length属性的 function fn2<T>(arr:T[]):T[]{ console.log(arr.length); return arr; } //使用时指定参数是string的数组,调用时指定泛类型为string参数为string的数组 var c:string[]=fn2<string>(['1','2']); console.log(c); //泛型类型 function fn3<T>(str:T):T{ return str; } //创建一个泛类型的函数赋值为fn3 //<T>(str:T) 表示此变量为一个泛函数,参数也是泛类型 // =>T 表示返回值 为泛类型 //=fn3 此变量等于fn3泛函数。 var cc:<T>(str:T)=>T=fn3; console.log(cc('cc')); //函数申明的第二种写法 var ccb:{<T>(str:T):T}=fn3; console.log(ccb('ccb')); //定义函数类型 //:(参数类型) => 返回类型 =函数定义 var fun:(num:number) => string=function(a:number){ return 'val='+a; } console.log(fun(33)); //接口中应用泛 //接口函数为泛类型 interface in1{ <T>(str:T):T; } //定义泛函数 函数、参数、返回值为泛类型 function fnc<T>(str:T):T{ return str; } //指定变量类型为接口 值为泛函数 var cs:in1=fnc; console.log(cs('dd')); console.log(cs<number>(33)); //接口 类型为泛类型,函数参数返回值为泛类型 interface in2<T>{ (str:T):T; } //函数类型、参数、返回值为泛类型 function fns<T>(str:T):T{ return str; } //变量类型为接口类型为string 赋值为函数 //这个函数变量只能传递string var dd:in2<string>=fns; console.log(dd('fd')) //泛型类 //指定类为泛类型,属性也为泛类型,方法参数和返回值也为泛类型 class cl<T>{ name:T; add:(num:T)=>T;//方法的申明 getname:{(num:T):T};//方法的申明二 } //new 创建对象指定类为string类型 //那么对象的属性赋值就需要为string //对象方法的实现也需是string //对象方法调用也需要sgring var cd=new cl<string>(); cd.name="star"; cd.add=function(num:string){ return num; } console.log(cd.add('ss'));
//module name{} //模块内创建属性、类、接口、需要export关键字 module validation{ export interface str{ isbool(s:string):boolean; } export class cla implements str{ isbool(s:string):boolean{ return /^[a-zA-Z]$/.test(s); } } export class clb implements str{ isbool(s:string):boolean{ return /^[0-9]$]/.test(s); } } }