TypeScript常用知识点整理 |
您所在的位置:网站首页 › typescript知识点 › TypeScript常用知识点整理 |
介绍
TypeScript 是 JavaScript 的一个超集,添加了静态类型支持和更多现代编程特性,提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。 使用npm install -g typescript进行全局安装 将编写好的ts代码进行运行,第一种是手动运行直接输入对应的命令tsc加对应的ts文件,另一种是使用vscode tsc --init自动运行 基础 1,原始数据类型JavaScript的类型分为两种:原始数据类型(Primitive data types)和对象类型(Objecttypes)。 原始数据类型包括:布尔值、数值、字符串、null 、 undefined以及ES6中的新类型 symbol等。 一,布尔类型,字符串,数字类型,undefined和null在ts中的使用 export{} //布尔类型 let flag:boolean=true console.log(flag) //数字类型 let num:number=20 console.log(num) //字符串类型 let str1:string='李四' str1='张三' console.log(str1) //undefined和null let unf:undefined=undefined let nu:null=null console.log(unf,nu)编译完成转成js之后的代码 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); //布尔类型 let flag = true; console.log(flag); //数字类型 let num = 20; console.log(num); //字符串类型 let str1 = '李四'; str1 = '张三'; console.log(str1); //undefined和null let unf = undefined; let nu = null; console.log(unf, nu); 2,数组在ts中进行数组的定义 export{} //定义数组和前两种基本数据类型有所不同 //方式一 let arr1:number[]=[1,2,3] console.log(arr1) //方式二使用泛型 let arr2:Array=[4,5,6] console.log(arr2)被转成js之后 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); //定义数组和前两种基本数据类型有所不同 //方式一 let arr1 = [1, 2, 3]; console.log(arr1); //方式二使用泛型 let arr2 = [4, 5, 6]; console.log(arr2); 3,对象表示非原始类型,除了number,string,boolean之外的类型 export{} let obj:object={} let obj2:object={a:1} obj = new String() obj=obj2 console.log(obj)被编译js之后 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); let obj = {}; let obj2 = { a: 1 }; obj = new String(); obj = obj2; console.log(obj); 4,any类型在typescript中,任何类型的值都可以赋值给 any , any 也可以赋值给任意类型 export{} let type1:any=true type1=222 console.log(type1) let newArr:any[]=[1,2,3,4] console.log(newArr)被转换成ts之后和最终的输出结果 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); let type1 = true; type1 = 222; console.log(type1); let newArr = [1, 2, 3, 4]; console.log(newArr);它表示空值,代表没有任何返回值的函数 export{} function fun1():void{ console.log(123) } console.log(fun1())转换成ts之后及输出 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function fun1() { console.log(123); } console.log(fun1());ts在没有明确指定类型的时候会推测一个类型,分两种情况 1,定义变量的时候,直接给变量赋值,则定义类型为对应的类型 2,定义变量的时候,没有赋值,则定义类型为any类型 export{} let t1=123//这里t1是number类型,如果给t1一个字符串则会有错误提示 let g2;//这里的g2可以是任意类型的,相当于any g2=123 g2='' g2=[] 7,联合类型表示取值可以为多种类型中的一种 export{} //定义布尔类型和number类型的 let f:boolean|number=true//表示这个值可以接受布尔值和number两种的任意一种 f=123 f=false console.log(f) 8,接口-对象类型什么是接口? 1,在面向对象语言中,接口(Interfaces)是一个概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现( implement); 2,TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述; 3,接口它是对行为的抽像,用于行为的描述,理解为一种约束; 4,定义中的属性和类型必须要和使用的相同; interface Person{ name:string, age:number, height?:number,//加了问了表示是一个可选属性,这个属性可以有,也可以没有 readonly add:string,//定义一个只读的,对其行为进行一个约束 } let P:Person={ name:"李四", age:18, height:24, add:"某某区" } //如果在对id进行操作,则会给出错误提示 P.id='某某区1'//这里会错误提示 9,接口-数组类型接口对数组进行约束 interface InewArray{ [index:number]:number//表示接口里面有任意值,并且只能是number类型 } //进行定义 let arr:InewArray=[1,2,3,4]//如果这里面传入非number类型,会有错误提示 console.log(arr)//1,2,3,4 10,接口-函数类型对函数进行约束 //定义了一个add函数,a和b都是number类型 //后面的number表示这个函数的返回为number类型 function add(a:number,b:number): number{ return a+b } console.log(add(1,2)) //另一种定义函数的方式 //这里的问号也是代表可选参数,必选参数不可以放在可选参数的后面 let res=function(a:string,b?:string):string{ return a+b } console.log(res('type','script')) //多个参数的情况 function fn(x:string,y:string,...args:number[]){ console.log(x,y,args) } fn('','',1,2,3) //多个函数类型 function add2(x:string|number,y:string|number):string|number{ if(typeof x=='string'&&typeof y=='string'){ return x+y }else if(typeof x=='number'&&typeof y=='number'){ return x+y } } add2(2,3) add2('张三','李四') 11,类型断言将一个联合类型断言为其中一个类型 //定义一个函数,获取到一个数字或字符串的长度 //类型断言,可以手动指定一个类型,两种方式 //1,变量 as 类型 //2, 变量 function StringLength(x:string|number):number{ if((x as string).length){ return (x).length }else{ return x.toString().length } } console.log(StringLength('typescript')) console.log(StringLength(123))将任何一个类型断言为any 进阶 1,类型别名类型别名用来给一个类型起个新名字 type s=string//给类型起别名 let str:s='typescript' console.log(str) //另一种使用方式 type all=string|number|boolean let a1:all=123 console.log(a1) 2,字符串字面量类型字符串字面量类型用来约束取值只能是某几个字符串中的一个 //例如指定只能取以下的几个值 type stringName='张李'|'李四'|'王五' //这里的name只能取上面三个中的一个 let name:stringName="李四" console.log(name) 3,元组数组合并了相同类型的对象,而元组合并了不同类型的对象 //定义一个元组 let Arr:[number,string]=[123,'Script'] //添加内容的时候,需要的是number和string类型即可 Arr.push(456) Arr.push('hhh') //如果添加的数据越界会给出错误提示 4,枚举枚举(Enum)类型用于取值被限定在一定范围内的,比如一周只能有七天,颜色限定为红 绿蓝等。 1,常数项枚举的使用 enum NumberType{ one=1, two=2, three, four } console.log(NumberType)注意点: 1,每个数据值都可以是元素 2,如果没有手动赋值,默认第一个参数为0,后面的递增加1 3,后面的值如果没有手动赋值,会根据前面的值递 编译成js之后 (function (NumberType) { NumberType[NumberType["one"] = 1] = "one"; NumberType[NumberType["two"] = 2] = "two"; NumberType[NumberType["three"] = 3] = "three"; NumberType[NumberType["four"] = 4] = "four"; })(NumberType || (NumberType = {})); console.log(NumberType); 2,计算所得项 //计算所得项 enum abs{ red, //这里写了计算所得项,需要放置在已经确定的赋值枚举项之前 blur='blur'.length } 5,类 1,在类中定义属性和方法 //ts中的类 class Person { //对被传入的属性进行类型限定 constructor(name, age) { this.name = name; this.age = age; } say(str) { console.log("haha", str); } } let Obj = new Person("张三", 28); Obj.say("王五");编译成js之后 class Person { constructor(name, age) { this.name = name; this.age = age; } say(str) { console.log("haha", str); } } let Obj = new Person("张三", 28); Obj.say("王五"); //编译成ts后输出 haha 王五 2,使用类进行继承 //使用类进行继承 父类 class Dog{ name:string age:number constructor(name:string,age:number){ this.name=name this.age=age } say(str:string){ console.log("ha",str) } } //子类 class cat extends Dog{ constructor(name:string,age:number){ //调用父类的构造函数,使用super super(name,age) } jump(str:string){ console.log("jump",str) } } let cat1=new Dog("旺财",4) console.log(cat1.say("来财")) let cat2=new cat("花猫",3) console.log(cat2.jump("小多多"))被编译之后的js代码 class Dog { constructor(name, age) { this.name = name; this.age = age; } say(str) { console.log("ha", str); } } //子类 class cat extends Dog { constructor(name, age) { //调用父类的构造函数,使用super super(name, age); } jump(str) { console.log("jump", str); } } let cat1 = new Dog("旺财", 4); console.log(cat1.say("来财")); let cat2 = new cat("花猫", 3); console.log(cat2.jump("小多多")); 3,修饰符public,private 和 protectedTypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 public(公共) 、private(私有的) 和protected(受保护的) 1,public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都 是 public 2,private修饰的属性或方法是私有的,不能在声明它的类的外部访问 3,protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许 被访问的 4,接口继承类 class newDog{ name:string age:number constructor(name:string,age:number){ this.name=name this.age=age } say(str:string){ console.log("ha",str) } } //接口只会继承类中的实例属性和方法 interface newCat extends newDog{ age:number } let person:newCat={ name:"", age:18, say(){ } } console.log(person) 6,类与接口的联合使用一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用implements关键字来实现。这个特性大大提高了面向对象的灵活性。 interface Ising{ sing() } interface Sdance{ dance() } class obj1 implements Ising{ sing(){ } } class obj2 implements Sdance{ dance(){ } } const o1=new obj1() const o2=new obj2() o1.sing() o2.dance() 7,接口的合并如果定义了两个相同名字的函数,接口或类,那么它们会合并成一个类型 //合并的数据要一模一样,有一处不同会有错误提示 interface Dog{ name:"来财" } interface Dog{ name:"来财", age:15 } const cat:Dog={name:"来财",age:15} console.log(cat) 8,泛型泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 1,具体使用 /* 1,定义一个函数,传入两个参数,第一个参数是数据,第二个参数是数量 2,函数的作用:根据数量产生对应个数的数据,存放在一个数组中 */ //这里的T表示可以输入任何类型 //如果没有确定会自动进行类型推断 function newGetArr(value:T,count:number):T[]{ let arr:T[]=[] for(let i=0;i |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |