typescript学习笔记-1

mac2024-03-24  27

一、类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符

1、public

​ 公有 在类里面、子类、类外面都可以访问

2、protected

​ 保护类型 在类里面、子类里面可以访问、在类外部没法访问

3、private

​ 私有 在类里面可以访问,子类和类外部都没法访问

function Person(){

this.run1 = function(){

}

Person.run2 = function(){

}

}

加static关键词就是静态方法

静态方法没法直接调用类里面的属性

二、多态的定义

​ 多态: 父类定义一个方法不去实现,让继承它的子类去实现 每个子类有不同的表现

​ 多态属于继承

三、typescript中的抽象类:它是提供其他类继承的基类,不能直接被实例化

​ 用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体的实现并且必须在派生类中实现。

​ abstarct抽象方法只能放在抽象类里面

​ 抽象类和抽象方法用来定义标准

四、接口的作用

​ 在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里面方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。typescript中的接口类似java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。

​ typescript中的接口

​ 1、属性类接口

​ 2、函数类型接口

​ 3、可索引接口

​ 4、类类型接口

​ 5、接口扩展

/*** * 接口的作用 */ function printLabel(labelInfo:{label:string}):void{ console.log(labelInfo.label) } var labelInfo = {label: '123'} printLabel(labelInfo)

​ 对批量方法传入参数进行约束

​ 接口:行为和动作的规范,对批量方法进行约束

​ 接口用interface定义

​ 1、属性接口

​ 第一种写法

/** * 接口用interface定义 */ interface FullName{ fistName:string; //注意 以;结束 secondName?:string; } function consoleLog(info: FullName){ console.log(info.fistName+info.secondName) } var info = { fistName:'123' } consoleLog(info);

​ 第二种写法(推荐使用第二种)严格按照接口来,接口中有什么就写什么

/** * 接口用interface定义 */ interface FullName{ fistName:string; //注意 以;结束 secondName?:string; } function consoleLog(info: FullName){ console.log(info.fistName+info.secondName) } var info = { fistName:'123' } consoleLog(info);

​ 接口可选属性

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ggiozYj-1572489774531)(C:\Users\silly\AppData\Roaming\Typora\typora-user-images\1572421005742.png)]

​ 封装的ajax

/** * 封装ajax */ interface Config{ type:string; url:string; data?:string; dataType:string; } function ajax(config:Config){ var xhr = new XMLHttpRequest(); xhr.open(config.type,config.url,true); xhr.send(config.data); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log("成功") if(config.dataType == 'json'){ console.log(JSON.parse(xhr.responseText)); }else{ console.log(xhr.responseText) } }else{ console.log("连接失败") } } } ajax({ type: 'get', data: 'name=zhangsan', url: 'http://a.itying.com/api/productlist', dataType: 'json' })

​ 2、函数类型接口

​ 函数类型接口:对方法传入的参数以及返回值进行约束

​ 加密的函数类型接口

//加密的函数类型接口 interface encrypt{ (key:string,value:string):string; } var md5:encrypt = function(key:string,value:string):string{ return key + value } console.log(md5('yijia','663856')) interface uoload{ (key:string,value:string):string; } var sayHi:uoload = function(key:string,value:string):string{ return key + value + "say hi" } console.log(sayHi("你好","我是"))

​ 3、可索引接口

​ 在ts中定义数组的方式

​ 3.1 可索引接口 对数组的约束

//可索引接口,对数组的约束 interface UserArr{ [index:number]:string; } var arr2:UserArr= ['123','456','789']; console.log(arr);

​ 3.2 可约束接口 对对象的约束

//可索引接口对对象的约束 interface UserObj{ [index:string]:string; } var Obj:UserObj = { hello: '你', say: "hi" } console.log(Obj)

​ 3.3可索引接口 对类的约束 和抽象类有点相似

//类类型接口:对类的约束 和抽象类有点相识 interface Animal1{ name:string; eat1():void } class Dog1 implements Animal1{ name:string constructor(name:string){ this.name = name; } eat1(){ console.log(this.name + "吃肉"); } } var dogs = new Dog1("小狗"); dogs.eat1()

​ 3.4接口扩展:接口可以继承接口

//接口扩展:接口可以继承接口 interface Animal2{ eat():void; } interface Person1 extends Animal2{ work():void; } class Programmer{ public name:string; constructor(name:string){ this.name = name; } coding(code:string){ console.log(this.name + code) } } class Web2 extends Programmer implements Person1{ constructor(name:string){ super(name); } eat(){ console.log("要吃") } work(){ console.log("写代码") } } var person = new Web2("人"); person.eat(); person.work(); person.coding("codeYi");
5、 泛型

​ 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

​ 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,这个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

​ 通俗理解:泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持。

​ 泛型 可以支持不特定的数据类型 要求:传入的参数和返回的参数一致

​ T表示泛型,具体什么类型是在调用这个方法的时候决定的

function GetData<T>(value:T):T{ return value; } console.log(GetData<number>(456))

​ 类的泛型

class MinClaa<T>{ public list:T[] = []; add(value:T):void{ this.list.push(value); } minClass(){ var minNum = this.list[0]; for(var i=0;i<this.list.length;i++){ if(minNum > this.list[i]){ minNum = this.list[i]; } } return minNum } } var minClass = new MinClaa<number>() minClass.add(9); minClass.add(2); minClass.add(77); minClass.add(66); console.log(minClass.minClass());
最新回复(0)