TypeScript 类 第三章 【抽象类,类的高级技巧】

简介: TypeScript 类 第三章 【抽象类,类的高级技巧】

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Typescript

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

抽象类


抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口,抽象类可以包含成员的实现细节。abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。


abstract class Animal {
    abstract makeSound(): void;<font></font>
    move(): void {
        console.log('roaming the earch...');<font></font>
    }<font></font>
}<font></font>


抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而,抽象方法必须包含 abstract关键字并且可以包含访问修饰符。


abstract class Department {<font></font>
<font></font>
    constructor(public name: string) {<font></font>
    }<font></font>
<font></font>
    printName(): void {
        console.log('Department name: ' + this.name);<font></font>
    }<font></font>
<font></font>
    abstract printMeeting(): void; // 必须在派生类中实现<font></font>
}<font></font>
<font></font>
class AccountingDepartment extends Department {<font></font>
<font></font>
    constructor() {
        super('Accounting and Auditing'); // constructors in derived classes must call super()<font></font>
    }<font></font>
<font></font>
    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');<font></font>
    }<font></font>
<font></font>
    generateReports(): void {
        console.log('Generating accounting reports...');<font></font>
    }<font></font>
}<font></font>
<font></font>
let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass<font></font>
department.printName();<font></font>
department.printMeeting();<font></font>
department.generateReports(); // error: method doesn't exist on declared abstract type



高级技巧


构造函数


当你在TypeScript里声明了一个类的时候,实际上同时声明了很多东西。 首先就是类的 实例的类型。


class Greeter {<font></font>
    greeting: string;
    constructor(message: string) {
        this.greeting = message;<font></font>
    }<font></font>
    greet() {<font></font>
        return "Hello, " + this.greeting;<font></font>
    }<font></font>
}<font></font>
<font></font>
let greeter: Greeter;<font></font>
greeter = new Greeter("world");
console.log(greeter.greet());


这里,我们写了let greeter: Greeter,意思是Greeter类的实例的类型是Greeter。 这对于用过其它面向对象语言的程序员来讲已经是老习惯了。


我们也创建了一个叫做构造函数的值。这个函数会在我们使用 new创建类实例的时候被调用。下面我们来看看,上面的代码被编译成JavaScript后是什么样子的:


let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;<font></font>
    }<font></font>
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;<font></font>
    };<font></font>
    return Greeter;<font></font>
})();<font></font>
<font></font>
let greeter;<font></font>
greeter = new Greeter("world");
console.log(greeter.greet());


上面的代码里,let Greeter将被赋值为构造函数。我们当调用 new并执行了这个函数后,便会得到一个类的实例。这个构造函数也包含了类的所有静态属性。换个角度说,我们可以认为类具有 实例部分与静态部分这两个部分。


让我们稍微改写一下这个例子,看看它们之前的区别:


class Greeter {
    static standardGreeting = "Hello, there";<font></font>
    greeting: string;<font></font>
    greet() {<font></font>
        if (this.greeting) {
            return "Hello, " + this.greeting;<font></font>
        }<font></font>
        else {
            return Greeter.standardGreeting;<font></font>
        }<font></font>
    }<font></font>
}<font></font>
<font></font>
let greeter1: Greeter;<font></font>
greeter1 = new Greeter();
console.log(greeter1.greet());<font></font>
<font></font>
let greeterMaker: typeof Greeter = Greeter;<font></font>
greeterMaker.standardGreeting = "Hey there!";<font></font>
<font></font>
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());



把类当做接口使用


如上一节里所讲的,类定义会创建两个东西:类的实例类型和一个构造函数。因为类可以创建出类型,所以你能够在允许使用接口的地方使用类。


class Point {
    x: number;
    y: number;
}
interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};




后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


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