TypeScript之类与抽象类

简介: TypeScript之类与抽象类

前言:记录一下typeScript中的类,TS中的类与ECMAScript中的类还是有很大区别的!ES6开始引入了类的概念,通过class 关键字定义类,在constructor中定义实例属性等。 比起 ES6中的类,在TS中,多了一些类型定义和private、public等关键字。在TypeScript里,我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

一、类的定义

传统的类为了实现 主业务,抽象类有点类似于 interface


主要是为了抽象,那么其中的抽象方法必须被 继承的类 重新实现


*  1.抽象类可以具体实现,也可以定义抽象方法


* 2.方法修饰符


*   public   共有的 任何地方都可以访问到


*   private  私有的 不能再类的外部使用 子类也不可使用 也就是说内部使用


*   protected  受保护的 子类中是可以使用的

// 传统的类为了实现 主业务,抽象类有点类似于 interface 
// 主要是为了抽象,那么其中的抽象方法必须被 继承的类 重新实现
abstract class Animal {
    abstract makeSound(): void;
    public move(): void {
        console.log('dog wang---');
    }
    private run(): void {
        console.log('run--');
    }
    protected say(): void {
        console.log('say--');
    }
}
// 继承的子类
class Dog extends Animal {
    constructor() {
        // 需用通过 super 关键字 进行调度
        super();
    }
    makeSound() {
        console.log('cat miao---');
    }
}
const dog = new Dog();
dog.makeSound();
dog.move();

二、抽象类,即可作为一个 实体类 使用,也可以当做一个类型使用,但是不允许创建实例对象

       Tips: 抽象类不允许被 new 调用,也就是不允许创建实例对象,仅作为一个可以被继承的父类。

abstract class Animal {
    // 定义一个抽象方法
    // 抽象方法使用 abstract 开头,没有方法体
    // 抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写
    abstract makeSound(): void;
    move(): void {
        console.log('dog wang---');
    }
}
// 继承的子类
class Dog extends Animal {
    constructor() {
        // 需用通过 super 关键字 进行调度
        super();
    }
    makeSound() {
        console.log('cat miao---');
    }
}
const dog = new Dog();
dog.makeSound();
dog.move();
// 类,即可作为一个 实体类 使用,也可以当做一个类型使用
const cat: Dog = new Dog()
cat.makeSound();
cat.move();
const m: Animal = new Dog()
m.move();
m.makeSound();

三、生成私有变量 private 与 # 的区别( 主要是在 build 打包以后生成js的区别 )

 1.用 private 声明的 私有变量

class Demo {
    private num: number;
    constructor() {
        this.num = 20;
    }
}
const n = new Demo();
console.log(n.num)  // 属性“num”为私有属性,只能在类“Demo”中访问。

private build 生成 js

20210527153548522.png

2. 用 # 声明的私有变量 ( 主要是使用 WeakMap 来管理 )

class Demo {
    #num: number;
    constructor() {
        this.#num = 20
    }
}
const s = new Demo();
console.log(s.num);

# build 生成 js

20210527153548522.png

相关文章
|
1天前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
1天前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
1天前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
21 0
|
1天前
|
JavaScript
类和继承在TypeScript中的使用详解
【4月更文挑战第23天】TypeScript中的类和继承详解:使用`class`定义类,包含属性和方法,如`Animal`示例。通过`extends`实现继承,如`Dog`继承`Animal`,可重写父类方法。使用访问修饰符`public`、`protected`、`private`控制成员可见性。抽象类和抽象方法用于定义基类和强制子类实现特定方法,提升代码组织和可维护性。
|
1天前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
46 0
|
1天前
|
存储 设计模式 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(三)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
1天前
|
存储 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(二)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
1天前
|
缓存 JavaScript 前端开发
TypeScript 类的基础:从定义到实例化,让你快速掌握(一)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
1天前
|
JavaScript
如何在 TypeScript 中定义类
如何在 TypeScript 中定义类
17 0
|
1天前
|
JavaScript 前端开发 编译器
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
27 0