TypeScript类与对象：面向对象编程的基础-Toy模板网

这篇具有很好参考价值的文章主要介绍了TypeScript类与对象：面向对象编程的基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

引言

TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了静态类型、类、接口和装饰器等面向对象编程的特性，并通过编译器将 TypeScript 编译成JavaScript，可以在任何 JavaScript 环境中运行，因此成为了 JavaScript 开发中不可或缺的工具。面向对象编程是现代编程语言的基础，而 TypeScript 的类与对象是实现面向对象编程的基础。

类的定义

和 JavaScript 一样，TypeScript 中的类也使用 class 关键字进行定义，定义类的语法如下：
```
class ClassName {
    //类成员的定义
}
```
类成员可以包含属性、方法、构造函数和静态成员等。

属性

类的属性可以通过直接在类中定义变量的方式实现。属性可以是普通的变量，也可以是类对象。
```
class Person {
    name: string;
    age: number;
}
```
在上面的例子中，我们定义了一个名为 Person 的类，它有两个属性，一个是 name ，一个是 age 。

方法

类的方法可以使用 function 关键字进行定义，也可以使用箭头函数进行定义。方法可以有返回值，也可以没有返回值。

class Person {
    name: string;
    age: number;
    sayHello():void {
        console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old`);
    }
    // 或者使用箭头函数的方式：sayHello: () => console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old`)
}

在上面的例子中，我们定义了一个名为 Person 的类，它有两个属性，一个是 name ，一个是 age。还定义了一个名为 sayHello 的方法，它没有返回值，当被调用时，会输出当前对象的 name 和 age 。

构造函数

类的构造函数用于初始化类的对象。和 JavaScript 一样，TypeScript 的构造函数使用 constructor 关键字进行定义。

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

在上面的例子中，我们定义了一个名为 Person 的类，它有两个属性，一个是 name ，一个是 age 。还定义了一个构造函数，它会接受一个名为 name 的字符串和一个名为 age 的数值，用于初始化当前对象的 name 和 age 属性。

静态成员

静态成员用于在类的实例之间共享数据。在 TypeScript 中，静态成员使用 static 关键字进行定义。

class Person {
    name: string;
    age: number;
    static total: number = 0;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        Person.total++;
    }
}

在上面的例子中，我们定义了一个名为 Person 的类，它有两个属性，一个是 name ，一个是 age 。还定义了一个静态成员 total ，用于记录当前类已经创建的对象的个数。每当构造函数被调用时，就会将 total 加 1 ，从而实现对 total 的更新。

对象的创建

在 TypeScript 中，创建对象需要先创建类的实例。创建类实例的方式有两种：

使用 new 关键字

使用 new 关键字创建类实例是最常用的方式。
```
let person1 = new Person("Tom", 18);
```
在上面的例子中，我们创建了一个名为 person1 的变量，它是 Person 类的实例，使用构造函数初始化了它的 name 和 age 属性。

使用对象字面量

使用对象字面量创建类实例通常用于创建没有自定义构造函数的类。

let person2: Person = {
    name: "Jerry",
    age: 20,
    sayHello: () => console.log("Hello")
};

在上面的例子中，我们创建了一个名为 person2 的变量，它是 Person 类的实例，使用对象字面量初始化了它的 name、age 和 sayHello 属性。

继承与多态

继承

继承是面向对象编程中的一种重要概念，它允许一个类从另一个类中继承属性和方法。和 JavaScript 一样，在 TypeScript 中，继承使用 extends 关键字进行定义。

class Student extends Person {
    grade: number;
    constructor(name: string, age: number, grade: number) {
        super(name, age);
        this.grade = grade;
    }
    sayHello(): void{
        console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, I'm in grade ${this.grade}`);
    }
}

在上面的例子中，我们定义了一个名为 Student 的类，它继承了 Person 类的所有属性和方法，并增加了一个名为 grade 的属性，用于表示学生的年级。还重写了父类的 sayHello 方法，用于输出当前对象的所有属性。

多态

多态是面向对象编程中的一种重要概念，它允许不同对象调用相同方法的行为表现不同。在 TypeScript 中，实现多态需要使用抽象类和接口。
抽象类是一种不能被直接实例化的类，它只能被继承。抽象类可以包含抽象方法和普通方法。
- 抽象方法是没有实现的方法，它的实现需要在子类中完成。
```
abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log("I'm moving");
    }
}
```
在上面的例子中，我们定义了一个名为 Animal 的抽象类，它有一个抽象方法 makeSound 和一个普通方法 move 。makeSound 方法没有实现，需要在子类中完成。

接口是一种用于定义对象的结构、属性和方法的类型。

接口只是一个类型声明，它没有实现任何行为。

interface Shape {
    area(): number;
}
class Circle implements Shape {
    radius: number;
    constructor(radius: number) {
        this.radius = radius;
    }
    area(): number {
        return this.radius * this.radius * Math.PI;
    }
}
class Square implements Shape {
    length: number;
    constructor(length: number) {
        this.length = length;
    }
    area(): number {
        return this.length * this.length;
    }
}

在上面的例子中，我们定义了一个名为 Shape 的接口，它有一个名为 area 的方法。还定义了两个实现了 Shape 接口的类，Circle 和 Square ，它们都实现了 area 方法，但是计算面积的方式不同。

总结

类与对象是面向对象编程的基础，通过类的定义，我们可以创建对象，并封装属性和方法。通过继承和多态，我们可以实现代码的复用和扩展。TypeScript 通过添加静态类型、类、接口和装饰器等特性，进一步增强了 JavaScript 的面向对象编程能力。熟练掌握 TypeScript 的类与对象，可以帮助我们快速开发高质量的JavaScript 应用程序。文章来源地址https://www.toymoban.com/news/detail-490280.html

到了这里，关于TypeScript类与对象：面向对象编程的基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！