ts类泛型接口扩展

最新推荐文章于 2024-08-11 07:45:39 发布
最新推荐文章于 2024-08-11 07:45:39 发布
阅读量2.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/118099057
版权

ts定义类

es5的类是这样定义的

在这里插入图片描述

es6类是这样定义的

在这里插入图片描述

ts中也是类似

在这里插入图片描述
实例化的属性需要在一开头定义，
在这里插入图片描述
在这里插入图片描述
二缺一也不行。

ts的继承

在这里插入图片描述
也是使用extends跟super实现继承。

类里面的修饰符

ts中提供三种修饰符
public 公有 哪里都可以访问，
protected: 保护类型，在类子类可以访问，类外不行，
private:私有，只能在自己类里访问，其他对方访问报错。
属性不加修饰符默认就是公有
在这里插入图片描述
该属性公共，在哪都可以访问在这里插入图片描述
该属性受保护，只能在类或者子类使用
在这里插入图片描述
该属性私有，只能在自己的类里面访问
在这里插入图片描述
对方法也是一样的。

静态属性，静态方法

es5中静态属性静态方法

在这里插入图片描述

其实可以这样理解，Son虽说是函数，本质也是对象，下面的操作是直接在Son这个对象上加属性，而不会被new后分配给实例，因为他们是Son对象上的属性和方法。而函数里面的this.run就是实例方法，会被实例继承的。

ts的类的静态方法

在这里插入图片描述
只需要在方法前加上static，定义是静态方法，不会被实例继承。
在这里插入图片描述
静态属性也是加static定义。

多态

父类定义一个方法不实现，让继承其的子类实现，每个子类有不同的表现
在这里插入图片描述
父类定义run方法，每个继承的子类实现该方法。这种写法只是表明多态是什么，结合抽象类能具体实现

抽象类 absrtact,要求子类比如包含某方法(抽象方法只能在抽象类使用)

在这里插入图片描述
父类不能实现该方法，交由子类实现
在这里插入图片描述
这时候必须子类必须实现抽象方法。在这里插入图片描述
子类必须实现抽象父类的抽象方法，抽象顾名思义就是不具体的，所以子类必须给个具体的说法。

函数类接口

对函数传入的参数以及返回值进行约束
在这里插入图片描述

这就是一个基本的函数接口，直接对传入的参数以及返回值进行约束。相当于我们直接在后面写上类型（）=>类型
这样约束。写成即接口类型可以复用。

可索引接口 数组 对象的约束

正常数组的约束
在这里插入图片描述
写成接口
在这里插入图片描述
因为数组的索引值是number类型的，所以适用于数组，而对象的属性都是string，
对对象的约束
在这里插入图片描述

类类型接口

与抽象类相似

在这里插入图片描述
类使用接口要用implements，此时接口就像一个抽象父类，里面的属性就像抽象属性方法，必须由子类具体实现
在这里插入图片描述
但这个抽象类的抽象方法的入参约束不到在这里插入图片描述

接口扩展 接口继承接口在这里插入图片描述这个主要用于封装组建的时候继承原生的HTML接口

在这里插入图片描述
使用的时候就可以传入原生的html属性
在这里插入图片描述
在这里插入图片描述

可以同时继承并且定义类的接口，因为name属性已经在父类定义了，所以super继承后，只需要定义eat方法就可。

泛型

泛型使得一个组件可以支持多个数据类型，提高复用性以及对不特定类型的支持。
基本使用
在这里插入图片描述

泛型类,类也可以作为参数传入泛型

在这里插入图片描述
在这里插入图片描述
如图，类可以作为参数传入，为什么不用接口呢？因为接口无法实例化

泛型接口

在这里插入图片描述
根据这些基本用法不难看出泛型可以大大提供复用性。相当于加了类型检验的any。

多个参数

在这里插入图片描述

案例 实现一个简单的可以操作数据库的苦库，支持mysql mongodb

首先应该想到使用接口约束参数，使用泛型来实现可复用性。
定义接口
在这里插入图片描述
定义操作类
在这里插入图片描述

类要以上面的接口为约束。
操作用户表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
获取数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
演示基本的操作，更多复杂的操作可以自己实现，主要是定义接口和实现类接口，规范约束。

ts 命名空间

模块化主要侧重代码的复用，比如一个模块可能有好几个命名空间，命名空间主要是用来组织代码，防止命名冲突。
最基本的用法
在这里插入图片描述
ts的namespace转化成js就是函数自执行函数
也可以暴露出去
在这里插入图片描述
在别的文件就可以通过A.XX来调用。

ts装饰器

装饰器是一种特殊类型的声明，能够被附加到类声明，方法，属性或者参数上，可以修改类的行为，通俗的讲就是装饰器是一个方法，可以注入到类，属性，方法来扩展这些功能，
常见的装饰器有类 属性 方法 参数装饰器。
装饰器的写法有 普通装饰器（无法传参） 装饰器工厂（可以传参）

类装饰器，应用于构造函数,可用来监视替换修改类定义
普通装饰器（无法拆参）

在这里插入图片描述
在装饰器里面可以对类进行操作，就类似于react的高阶组件，这个类通过装饰器这个"高阶组件"，功能更丰富了。如图
在这里插入图片描述
可以在装饰器在原型上增加一些属性方法供实例继承。

装饰器工厂 可传参 (之后的属性，方法等都是装饰器工厂

在这里插入图片描述
这种就是装饰器工厂。
类装饰器胡子哎沟站杉树运行时被调哟干嘛，类的构造函数作为其唯一的参数，但是如果，类装饰器返回了一个值，那么就会使用返回的值替代构造函数。
在这里插入图片描述
正常
在这里插入图片描述
使用装饰器
在这里插入图片描述
返回一个子类，该子类在继承父类实例的时候可以扩展自己的功能，也相当于react的高阶组件。在这里插入图片描述

属性装饰器 接受两个参数 （原型对象 属性名称）

在这里插入图片描述
属性装饰器
在这里插入图片描述
在这里插入图片描述

attr就是属性的名称，target就是这个类，如图aa已经被修改了。传入的参数就是params，返回一个函数。
要注意这里的target跟类装饰器的target有点区别。在这里插入图片描述
在这里插入图片描述
一个是构造函数，一个是整个类，因为本质来说，属性装饰器只是该属性的一个“高阶组件“,而类是整个类的”高阶组件”，所以不同。

方法装饰器

方法装饰器会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。在运行时传入三个参数，1 构造函数/类原型对象， 2 成员名字 3 成员属性描述符
在这里插入图片描述
在这里插入图片描述
当方法为static静态方法时
在这里插入图片描述

在这里插入图片描述
拿到的target就是构造函数

coderlin_
关注
ts泛型接口
qq_43033748的博客
11-22 457
interface iPerson<T1=string,T2=number>{ name:T1 age:T2 } const p:iPerson={ name:"why", age:18 }
TS中接口扩展和继承
Lee的博客
03-25 9237
//接口扩展：接口可以继承接口 interface Person{ eat():void; } interface Child extends Person{ work():void; } class Sth implements Child { public name:string; constructor(name:string){ this.name=name; } eat(){ console.log(this.
ts中的泛型接口
yjwlike的博客
01-06 3672
在ts中常常会用接口来定义对象的类型, 用来规定对象中应该存在哪些属性, 这些属性是什么类型, 但是某些情况下, 我不希望对象中属性的类型固定, 而是我传入什么类型, 属性就是什么类型 , 此时就需要使用泛型接口 . 我们先定义一个接口 interface objType { money: (value: number) => number arr: () => string[] } const obj2: objType = { money: (val) => val,
TypeScript系列教程四《扩展类型》
2401_85124347的博客
07-04 292
目前我总结出两种使用方式，一种是组成联合类型的类型可以统一处理，直接使用即可。1、如string和number都有toString方法。可以直接转成string 统一处理。console.log(‘我的年纪是’+ age.toString());2、判断类型，分别处理达到函数目的console.log(‘我是字符串’);}else{console.log(‘我是number’);类型别名。
TS基础 类型 类 接口 泛型
WRhan的博客
07-29 2703
目录TS指南1. TS基本类型2. 类（class）3. 面向对象的特点3.1 封装3.1.1 只读属性（readonly）：3.1.2 属性三种修饰符：3.1.3 属性存取器3.1.4 静态属性3.1.5 this3.2 继承3.3 抽象类（abstract class）4. 接口（Interface）5. 泛型（Generic） TS指南 1. TS基本类型 类型声明语法： let 变量: 类型; let 变量：{ 属性1：类型， 属性2：类型， [propName: strin
Ts的接口、泛型、自定义类型
weixin_68376171的博客
01-24 1164
TypeScript（TS）是一种强类型的JavaScript超集，它为JavaScript代码提供了类型检查功能。在TypeScript中，接口（Interfaces）、泛型（Generics）和自定义类型（Custom Types）是定义和强化代码类型的三种重要方式。接口是用来定义对象、类或函数的形状（shape）的一种类型系统。泛型是一种可以在定义函数、接口、类的时候，不预先指定具体的类型，而是在使用的时候再指定类型的特性。自定义类型通常是指那些使用TypeScript提供的类型系统来创建的新类型。
TS — （1）泛型的定义，泛型接口，泛型类
sjsjsjsj1010的博客
04-11 1430
泛型的定义，泛型接口，泛型类的详细介绍与示例应用
TypeScript的泛型接口 泛型类接口.zip
11-05
本篇将深入探讨泛型接口和泛型类接口，以及如何在实际项目中应用它们。 首先，我们来理解泛型接口。在TypeScript中，接口（Interface）用于定义对象的结构，而泛型接口则是具有一个或多个类型参数的接口。这样，...
TS 泛型类与类型约束
wuliCaibao的博客
08-11 1015
泛型类 注意： 不能用于类的静态成员 报错： 实例化： 注意： 实例化时可以不指定类型，此时函数调用时可以传入任意的数据类型 泛型约束 举个栗子： 报错： 泛型约束 注意：T继承了Length接口，表示T受到了一定约束，传入的参数需要具有length属性 比如： 小结：泛型的好处 1. 函数和类可以轻松的支持多种类型，增强程序的扩展性 2. 不必写多条函数重载，冗长的联合类型声明，增强代码的可读性 3. 灵活控制类型之间的约束 ...
TS —— 1、定义、泛型、类、枚举、元组、抽象
weixin_45042569的博客
07-10 5582
目录 42、TypeScript （1）JavaScript 与 TypeScript 的区别 （2）优势、缺点 （4）安装 （5）查看版本 （6）编译 （7）写法 （8）为什么要用到TS （9）定义 1.类型定义 （1）联合类型 （2）任意类型 2.数组类型 （1）方式一：数组 （2）方式二：泛型 3.面向对象—接口类型 （1）接口的定义： （2）可选属性： （3）任意属性 ：（一个接口允许随便加） （4）泛型（常用） 4.函数类型 （1）参数默认值 （...
ts的泛型应用场景？
08-30
4. 接口：泛型接口允许我们定义通用的接口，以适应不同类型的实现。这样可以增加接口的灵活性，并提供类型安全。 5. 类型转换和映射：泛型可以用于实现类型转换和映射操作。通过定义适当的泛型函数或类，我们可以...
TypeScript 泛型介绍
weixin_58207509的博客
11-26 1484
泛型 泛型，顾名思义，就是可以适用于多个类型，使用类型变量比如T帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。 本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数 泛型-泛型函数 创建泛型函数的格式 function fn<Type>(value: Type): Type { return value } // 上面的Type只是一个名字而已，可以改成其他的 function fn
TS泛型在函数、接口、类中使用介绍
u011200562的博客
06-02 1057
TS泛型在函数、接口、类中使用介绍
ts接口扩展、接口继承
热门推荐
bus_lupe的博客
06-08 1万+
接口扩展：接口可以继承接口 interface Animal{ eat():void; } interface Person extends Animal{ work():void; } class Web implements Person{ name: string constructor(name:string){ this.name = name } eat () { ...
TS中泛型的使用
XunLin233的博客
10-08 795
function 函数名<泛型名称> (参数 : 泛型名称) : 泛型名称 { // 函数体 }return a;
TypeScript：泛型接口
最新发布
听海边涛声
08-11 192
TypeScript：泛型接口
Typescript 基础进阶(三) — 泛型拓展(一)
Web_boom的博客
06-16 620
这是学习 的基础进阶的第三章节，我将会把我学习到的知识总结起来供大家参考。之前已经学习了泛型的基本用法，接下来我们拓展一下对于泛型的其他知识点。在 TypeScript 2.8 中引入了条件类型，使得我们可以根据某些条件得到不同的类型，这里所说的条件是类型兼容性约束。尽管以上代码中使用了 关键字，也不一定要强制满足继承关系，而是检查是否满足结构兼容性。条件类型有点类似三元表达式，根据真假从而在两种类型中选择其一： 上述代码的意思是：若 能够赋值给 ，那么类型是 ，否则为 。在 中， 操作符可以用来
TS 之接口和泛型
qq_45662523的博客
08-31 1807
最近项目需要使用ts，那么接口和泛型是一定需要了解的，今天他们两个的特性总结一波。
ts的接口和泛型的区别
06-01
TS（TypeScript）是 JavaScript 的超集，它提供了更加强大的类型系统和面向对象编程的支持。在 TS 中，接口和泛型都是非常重要的概念。 接口是一种定义对象结构的方式，它描述了对象应该具有的属性和方法。通过接口可以实现对对象的类型检查，从而提高代码的可读性和可维护性。 泛型是一种代码复用的方式，它允许我们编写一些可以用于多种类型的代码，从而提高代码的灵活性和可扩展性。泛型可以应用于函数、类和接口等多种场景，它可以避免代码重复，提高代码的复用性。 因此，接口和泛型的主要区别在于它们的应用场景和作用。接口主要用于定义对象的结构和类型检查，而泛型主要用于提高代码的复用性和灵活性。同时，接口是静态类型，而泛型是动态类型。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值