-
TS泛型
2021-01-07 21:45:52TS泛型 泛型可以创建可重用的组件,一个组件可以支持多种类型,解决类,接口,方法的复用性,以及对不确定数据类型的使用 class MinCla<T>{ public list:T[]=[]; add(value:T):void{ this.list.push(value) } ...TS泛型
泛型可以创建可重用的组件,一个组件可以支持多种类型,解决类,接口,方法的复用性,以及对不确定数据类型的使用
class MinCla<T>{ public list:T[]=[]; add(value:T):void{ this.list.push(value) } min():T{ 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 } } //这样做的一个好处是可以做类型校验,如果是any就不行,这是泛型的特点,传入什么类型返回什么类型是一致的 var m=new MinCla<number>() m.add(1) m.add(3) console.log(m.min());//1 var m1=new MinCla<string>() m1.add('a') m1.add('z') console.log(m1.min());//a
泛型接口用法跟泛型类差不多就是把类型换成泛型就行了
interface Config{ <T>(value1:T):T } var getData:Config =function<T>(value1:T){ //直接在后面加:泛型接口名称,注意类和接口都可以作为参数传入 return value1 } //第二种写法 interface Config<T>{ (value1:T):T } function getData<T>(value1:T):T{ return value1 } var myGetData:Config<string>=getData
把类作为参数类型的泛型类
//把类作为参数约束数据传入的类型 class User { username:string|undefined; password:string|undefined } class MySql<T> { add(user:T):boolean{ //把User类型作为参数赋值进去 console.log(user);//打印出User对象 return true } } var u=new User(); u.password='123456' u.username="张三" var Db=new MySql<User>(); Db.add(u)
TS命名空间(namespace)
命名空间属于内部模块,主要用于模块避免命名冲突,一个模块里可以有多个命名空间
namespace A{ //因为命名空间是私有的,所以需要暴露出来 export 代码 } //调用 var a=new A.类名/方法名
TS装饰器
普通装饰器不传参
//扩展类,方法的功能 function logClass(params:any){ console.log(params);//params作为第一个参数,默认就是Animal这个类 //动态扩展逻辑代码 params.prototype.run=function(){ } } @logClass//注意后面不要冒号 class Animal{ //逻辑代码 }
装饰器工厂可以传参
function logClass(params:string){ return function(target:any){ console.log(params);//字符串参数 console.log(target);//target打印出来就是Animal这个类 } } @logClass('字符串参数')//注意后面不要冒号 class Animal{ //逻辑代码 }
装饰器还可以重载类或者方法
function logClass(params:any){ return class extends params { apiUrl:any='我是修改的' getData(){ this.apiUrl=this.apiUrl+'---------0' console.log(this.apiUrl); } } } @logClass class HttpClient { public apiUrl:string|undefined; constructor() { this.apiUrl='我是构造函数里面的apiurl' } getData(){ console.log(this.apiUrl); } } var http=new HttpClient(); http.getData()//我是修改的---------0
装饰器中每个参数打印的结果
//类装饰器 function logClass(params:any){ return function(target:any){ console.log(params);//12345 装饰器参数 console.log(target);//target打印出来就是这个HttpClient类 } } //属性装饰器 function shuxing(params:any){ return function(target:any,attr:any){ console.log(params);//属性参数 //getData跟a方法组成的数组对象,对于静态成员来说就是类的构造函数,对于实例来说就是类的原型对象 console.log(target); console.log(attr); //apiUrl 就是属性名称 target[attr]=params//修改属性 } } //方法装饰器 function logMethod(params:any){ return function(target:any,mName:any,desc:any){ console.log(params);//aaa 方法参数 console.log(target);//当前类 console.log(mName);//getdata方法名 console.log(desc);//描述信息 desc.value就是当前方法可以用于修改方法 //扩展属性 target.name='张三' target.Fn=function(){ console.log(111) } } } @logClass(12345) class HttpClient { @shuxing('属性参数') public apiUrl:string|undefined; constructor() { // this.apiUrl='我是构造函数里面的apiurl' } @logMethod('aaa') getData(){ console.log(this.apiUrl);//属性参数 } a(){ } } var http=new HttpClient(); http.getData() console.log(http.name); //张三 console.log(http.Fn);//fn扩展方法
-
ts 泛型
2020-11-17 16:23:03泛型:函数名< T >(value:T):T{} 不能这样,万一传入的是数字就出错,所以只能传入什么返回什么。 泛型类 解决类的复用。 深入泛型类 若是不加上类CC作为规范,传入其他值也可以。 定义A类泛型,... -
ts泛型
2020-11-09 23:32:45泛型 在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。 其实就是把类也当作变量(类是可变的,未知的)使用,把类放在<>尖括号内,表示声名的类型。 定义 function ...泛型
在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。
其实就是把类也当作变量(类是可变的,未知的)使用,把类放在<>尖括号内,表示声名的类型。- 定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}
- 如:
function 函数名(length: number, value: T): Array {};其中T就是类型的变量名;调用 函数名(参数) //给变量T赋值为string。
1、函数里使用泛型
function fun<T>(a:number,b:T):any{ return a+"----"+b } let demo1=fun<string>(8,"哈哈") console.log(demo1)//8----哈哈
2、类里面使用泛型
class Person1<T,S>{ name:T; sex:S; age:number constructor(name,sex,age){ this.name=name; this.sex=sex; this.age=age; } } let demo2=new Person1<string,number>("张三","name",18) console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
注意看与上面不同的地方
class Person1<T,S>{ name:T; sex:S; age:number constructor(name:T,sex,age:number){ this.name=name; this.sex=sex; this.age=age; } } let demo2=new Person1<string,number>("张三","男",18) console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
-
ts泛型工具函数
2021-03-31 10:09:56TS的泛型语法糖工具函数 partial 将所有持有属性变为可选 interface data { title: String, desc: String, say?: String } const testPartial = (dataOne: data, dataTwo: Partial<data>) => { return...TS的泛型语法糖工具函数
partial 将所有持有属性变为可选
interface data { title: String, desc: String, say?: String } const testPartial = (dataOne: data, dataTwo: Partial<data>) => { return {...dataOne, ...dataTwo} } console.log(testPartial({title: '测试1', desc: '描述1'}, {desc: '我只需要传入一个'}))
Required 与partial相反 将可选属性变为必选
const testRequired = (dataOne: data, dataTwo: Required<data>) => { return {...dataOne, ...dataTwo} } console.log(testRequired({title: '测试1', desc: '描述1'}, {title: '测试2', desc: '我只需要传三个', say: '我在测试Required'}))
Readonly 所有属性只读
const testReadonly = (dataOne: data, dataTwo: Readonly<data>) => { return {...dataOne, ...dataTwo} } console.log(testReadonly({title: '测试1', desc: '描述1'}, {title: '测试2', desc: '我是只读', say: '我在测试Readonly'}))
Record<keys, type> keys 代表键的类型 type代表值的类型
interface recordFace { title: String } type keyValue = 'home' | 'about' | 'contact' // type keyValue = string key只要是string就行 const testRecord: Record<keyValue, recordFace[]> = { about: [{ title: 'about'}], home: [{ title: 'home'}], contact: [{ title: 'contact'}] }
Omit<type, key> 从type仲移除key对应的属性
interface testOmit{ title: String, desc: String } // type 定义类型 type testOmit2 = Omit<testOmit, 'desc'> const todoOmit: testOmit2 = { title: '我又来测试了', }
Exclude<Type, ExcludedUnion> 在type中删除ExcludedUnion 取不同部分
Extract <Type, Union> 生成交集 取相同部分 -
ts泛型接口
2019-06-09 09:10:48函数类型接口 interface ConfigFn{ (value1:string, value2:string):string; } var setData:ConfigFn=function (value1:string, value2:string):stirng{ return value1 + value2;...函数泛型接口 i... -
ts 泛型 高级类型
2021-01-08 17:33:17/* type t = 1 | 2 */ Omit 从泛型 T 中提取出不在泛型 K 中的属性类型,并组成一个新的对象类型 type Omit, K extends keyof any> = Pick, Exclude, K>>; interface IUser { name: string; age: number; address: ... -
ts泛型使用举例
2018-04-17 15:31:20使用ts页有一段时间了,对于我这种泥腿子前端来说,一开始就是为了赶个时髦学学ts,对于它对开发有什没特别的好处并不是非常能体会,反而在一开始的时候觉得为什么要搞一个这么麻烦的东西出来,各种编译错误,几度想... -
TS泛型使用笔记Generics
2020-11-12 11:14:40泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
收藏数
498
精华内容
199