Typescript 类、继承和多态

已于 2023-05-27 22:24:07 修改
阅读量156 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 vue.js typescript
于 2023-05-27 19:39:51 首次发布
创作源自于MyFreeIT
本文链接：https://blog.csdn.net/MyFreeIT/article/details/130904915
版权

结论

  1. 父类member function 子类可以通过member function or member property 重写。

        父类member property 子类只能通过member property重写。

        为了更易于阅读，建议使用member function的方式定义。

     2.Typescript没有只能重写不能重载实现多态，但是JS里可以多态。

Demo

(()=>{
    class annimal{
        name:string
        constructor(name:string){
            this.name = name
        }
        // run =function(distance:number=0){
        //     console.log(this.name +" running "+distance)
        // }
        run(distance:number=10){
            console.log(this.name +" running "+distance)
        }
    }

    class dog extends annimal{
        kind:string
        constructor(name:string,kind?:string){
            super(name)
            this.kind = kind
        }
        run(distance:number=10){
            console.log(this.name +" running "+distance+" kind "+this.kind)
        }
        // run = function(distance:number=10){
        //     console.log(this.name +" running "+distance)
        // }
    }

    class pig extends annimal{
        constructor(name:string){
            super(name)
        }
        run = function(distance:number,kind?:string){
            console.log(this.name +" running "+distance+" kind "+kind)
        }

    }
    new dog('dog','tibet').run(50)
    new pig("pig").run(600,'Red pig')
}
)()

在生成的JS里，可以多态dog里面的run方法，但是在Typescript里没有办法做到真正的多态，只能重写，也就是run方法只能写一个，而不能有多个。

(() => {
    class annimal {
        constructor(name) {
            this.name = name;
        }
        // run =function(distance:number=0){
        //     console.log(this.name +" running "+distance)
        // }
        run(distance = 10) {
            console.log(this.name + " running " + distance);
        }
    }
    class dog extends annimal {
        constructor(name, kind) {
            super(name);
            this.kind = kind;
        }
        run(distance = 10) {
            console.log(this.name + " running " + distance + 
                                       " kind " + this.kind);
        }
        run(distance,color){
            console.log(this.name + " running " + distance + 
                            " kind " + this.kind +" color "+color);
        }
    }
    class pig extends annimal {
        constructor(name) {
            super(name);
            this.run = function (distance, kind) {
                console.log(this.name + " running " + distance + " kind " + kind);
            };
        }
    }
    new dog('dog', 'tibet').run(50,'blue');
    new pig("pig").run(600, 'Red pig');
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body>
    <script src="./js/first.js"></script>
</body>
</html>

 

测试结果

MyFreeIT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript：类的继承
风静如云的博客
03-29 5141
类可以继承，继承可以说是对父类抽象的一次细化，通常基类（父类）用于描述更一般、更通用的属性及方法，继承类（子类）则用来描述更具体、更特别的属性及方法。并且继承类可以重写基类的方法以完成对方法的重新定义： class IPhone extends Phone{//基类Phone定义于章节“TypeScript:类是什么”，IPhone继承于Phone makeCall(phoneNumber : string) : void //重写了基类方法 { console.log(this
浅学TypeScript（4）——面向对象：类、虚类、接口、多态、继承、封装等
衡与墨的博客
12-05 2760
类的概念 虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法 对象（Object）：类的实例，通过 new 生成 面向对象（OOP）的三大特性：封装、继承、多态 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。...
「TypeScript系列」TypeScript 类/类继承
最新发布
日常笔记/总结/系列知识梳理
05-26 1201
访问控制修饰符对于封装和隐藏类的内部状态特别有用，它们允许你定义哪些成员是公开的（可以被外部使用），哪些成员是私有的（只能在类内部使用），以及哪些成员是受保护的（可以在类内部和子类中使用）。TypeScript 提供了基于类的面向对象编程的语法，这允许你定义类、属性和方法，以及实现继承、封装和多态等面向对象的概念。关键字，但实际上是重写了父类的方法，并且父类的方法在后续版本中发生了更改（例如，方法签名改变了），那么 TypeScript 编译器可能不会给出明确的错误提示，这可能会导致运行时错误。
TypeScript中类的继承
weixin_58498354的博客
04-24 1474
特点： 避免重复创建类，减少代码数量 通过extends关键字继承父类 通过super继承父类的属性和方法 实例： class Person1 { // 定义属性 name:string age:number gender:string constructor(name:string,age:number,gender:string){ this.name = name this.age = age this.ge
TypeScript类和继承
weixin_42560424的博客
03-20 2064
TypeScript中的类和继承可以帮助我们更好地组织代码，并且使得代码更易于维护和扩展。在TypeScript中，可以使用class关键字来定义一个类，然后使用extends关键字来实现继承。
typescript中类的继承
weixin_30532759的博客
03-21 160
typescript中类的继承用到的是：extends和super 先看一下typescript中类的写法： class Demo{ //类的属性 name:string; age:number; //类的构造函数 constructor(name:string,age:number){ this.name=na...
Typescript中的类 类中的静态属性 静态方法 抽象类 多态.zip
11-05
在TypeScript中，类是面向对象编程的基础构造块，它提供了封装、继承和多态等特性。本压缩包包含的代码实例着重讲解了类中的静态属性、静态方法、抽象类以及多态这四个核心概念。 1. **静态属性**： 类的静态属性...
Typescript的学习和服务器端渲染笔记.zip
10-25
类可以定义属性和方法，支持继承、封装和多态。这使得TypeScript更适用于构建大型、结构化的应用。 ```typescript class Person { name: string; age: number; constructor(name: string, age: number) { this...
Typescript
03-10
3. **类（Classes）**：TypeScript支持面向对象编程，包括类、继承、多态等概念。类允许我们创建具有封装、继承和多态性的复杂对象。 4. **泛型（Generics）**：泛型允许我们在编写代码时定义可重用的组件，这些...
typescript
03-30
泛型是TypeScript中的另一个重要特性，允许函数和类具有参数化的类型。这意味着相同的函数或类可以处理多种类型的参数，而无需重复代码。泛型提高了代码的重用性，同时保持类型安全。例如，可以创建一个通用的`...
typeScript
03-08
TypeScript引入了类和继承的概念，使得面向对象编程成为可能。开发者可以创建类，定义构造函数、属性和方法，然后通过继承机制实现代码复用。这使得TypeScript更适合构建复杂的软件架构，尤其是在处理状态管理、组件...
Typescript ---类与继承
qq_43057018的博客
06-10 284
Typescript 使用class关键字来定义一个类 类中直接定义的属性是实例属性，需要通过对象的实例去访问；使用开头的属性是静态属性（类属性），可以直接通过类访问。 readonly 为只读属性，不可以进行修改。和如果想要同时出现的话，需要放在后面。 构造函数 constuctor被称为构造函数，会在对象创建时调用，在实例对象方法中，this就表示当前的实例，在构造函数中当前对象就是当前新建的那个对象，可以通过this向新建的对象中添加属性。 继承 继承是面向对象编程中讨论最多的话题。abstrac 开
typescript类，继承和修饰符
litter_lj的博客
03-09 162
1.类的定义 /类的定义 class Person { name: string; //默认是public修饰符 //构造函数 constructor(name: string) { this.name = name; } //方法 无返回值 run(): void { console.log(this.name); } work(): stri...
5、ts中的类、继承及抽象类、多态
红鹰
07-12 328
ts中的类、继承及抽象类、多态TS中的类及继承使用抽象类及多态 TS中的类及继承使用 //public private protected static class Animal { public name:string; private age:number; protected birthday:string; public speed:number=10; constructor(name:string,age:number,birthday:string){
TypeScript基础知识：类和继承
aidscooler的专栏
01-03 474
类的定义TypeScript 是一种静态类型的编程语言，它在JavaScript的基础上增加了类型系统。其中，类和继承是面向对象编程中的重要概念。本文将深入介绍TypeScript中的类和继承，并通过示例代码帮助读者更好地理解这些概念。
07-TypeScript类的概念和类的继承
绿色的小苹果
07-16 123
上一章说了TypeScript的对象， 说完对象， 说TypeScript类。 类是对象的模板， 描述了所创建的对象共同的属性和方法。创建一个类的语法是这样 class className { 属性 构造函数 方法 } 举例 class Animal { // 属性 name: string color: string constructor(name: string, color: string) { this.name = name;
TypeScript：类与对象、继承、抽象类
孤安先生的博客，作者主站正在重构中，敬请期待！
06-29 188
TypeScript 侧重于对象的编程，扩展性强，成本低，当程序出问题后定位对象即可，哪个对象出问题就找哪个对象修复就可以。
TypeScript函数、类、继承、类修饰符
zero________________的博客
11-26 909
函数声明 function run():string { return 'run' } 匿名函数 let fun = function():number{ return 123 } 定义方法传参 function getInfo(name:string,age:number):string{ return `${name}--${age}` } console.l...
typescript 类的使用场景
08-24
总结来说，TypeScript类的使用场景主要包括封装和组织代码、创建对象、继承和多态、类型的定义和校验以及类的实例化和初始化。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值