【TS】九天学会TS语法——5.TypeScript的类
💯 欢迎光临清清ww的博客小天地💯
🔥 个人主页:【清清ww】🔥
📚 系列专栏:vue3 | TypeScript 📚
🌟 学习本无底，前进莫徬徨。🌟
开始学习！
目录
一、类定义
二、构造函数
三、访问修饰符
四、继承
五、多态
1.接口与多态
2.继承与多态
在 TypeScript 中，类（Class）是面向对象编程的核心概念之一。本文将详细介绍 TypeScript 类的定义、构造函数、访问修饰符、继承和多态。
一、类定义
在 TypeScript 中，类是一种用于创建对象的蓝图，通过使用 class 关键字 来创建。类可以包含属性（数据成员）和方法（函数成员）。
类定义的基本语法如下：
class ClassName {// 属性property: type;// 方法method(): void {// 方法体}
}
举个简单的例子：
class Person {// 属性name: string;age: number;// 方法greet(): void {console.log(`你好，我是 ${this.name} ，我${this.age}岁了`);}
}// 创建类的实例
const person = new Person('清清ww', 3);// 调用方法
person.greet(); // 输出: 你好，我是清清ww，我三岁了.
二、构造函数
构造函数是类的一个特殊方法，用于在创建对象时初始化对象的属性。构造函数的名称与类名相同，并且没有返回类型。
构造函数的定义如下：
constructor(参数列表) {// 构造函数的代码
}
参数列表中的参数可以是任意类型的，这些参数用于接收外部传入的值，以便在构造函数内部使用。在构造函数内部，可以使用 this 关键字来引用当前正在创建的实例，并将参数的值赋给实例的属性。
下面是一个包含构造函数的 TypeScript 类的例子：
class Person {// 属性name: string;age: number;// 构造函数constructor(name: string, age: number) {this.name = name;this.age = age;}// 方法greet(): void {console.log(`你好，我是 ${this.name} ，我${this.age}岁了.`);}
}// 创建类的实例
const person = new Person('清清ww', 3);// 调用方法
person.greet(); // 输出: 你好，我是清清ww，我三岁了.
在这个例子中，Person 类的构造函数接受两个参数：name 和 age。当使用 new 关键字创建 Person 类的实例时，构造函数会被自动调用，并将传入的参数值赋给实例的 name 和 age 属性。
构造函数还可以执行其他初始化任务，例如调用其他方法、设置默认值或进行其他必要的设置。构造函数是类实例化过程中的一个重要部分，它确保了每个实例在创建时都处于一个已知且一致的状态。
三、访问修饰符
TypeScript 提供了三种访问修饰符：public、private 和 protected，用于控制类成员的访问级别。
那么它们有什么区别呢？通过一个例子来说明。
首先，我们定义一个 Person 类，其中 name 属性为 public，age 属性为 private：
class Person {public name: string; // 公共属性，可以在类的外部访问private age: number; // 私有属性，只能在类的内部访问constructor(name: string, age: number) {this.name = name;this.age = age;}public greet() {console.log(`你好，我是 ${this.name} ，我${this.age}岁了.`);}
}const person = new Person('清清', 3);
person.greet(); // 可以调用 public 方法
console.log(person.name); // 可以访问 public 属性
// console.log(person.age); // 错误：Property 'age' is private and only accessible within class 'Person'.
name 属性为 public，所以它可以在类的外部被访问。因此，我们可以直接通过 person.name 访问 name 属性的值。
然而，age 属性为 private，它只能在 Person 类的内部被访问。尝试在类的外部通过 person.age 访问 age 属性会导致一个错误，因为外部代码无法访问私有成员。
现在，让我们将 age 属性的访问修饰符更改为 protected：
class Person {public name: string; // 公共属性，可以在类的外部访问protected age: number; // 受保护属性，只能在类的内部和子类中访问constructor(name: string, age: number) {this.name = name;this.age = age;}public greet() {console.log(`你好，我是 ${this.name} ，我${this.age}岁了.`);}
}const person = new Person('清清', 3);
person.greet(); // 可以调用 public 方法
console.log(person.name); // 可以访问 public 属性
// console.log(person.age); // 错误：Property 'age' is protected and only accessible through an instance of 'Person'.
age 属性为 protected，它可以在 Person 类的内部被访问，也可以在 Person 类的子类中被访问，但仍然不能在类的外部被访问。尝试在类的外部通过 person.age 访问 age 属性会导致一个错误，因为外部代码无法访问受保护成员。
总之，
public成员可以在任何地方访问，private成员只能在类的内部访问，而protected成员可以在类的内部和子类中访问。
其实很好理解，假如你是一个富翁：
你为大家修了一条路，这条路是公共的，大家都可以用 —— public；
你有一个专用机器人，除了你别人无法访问 —— private；
你的资产，除了你，还可以继承给你的子孙用 —— protected。
四、继承
在 TypeScript 中，可以使用 extends 关键字实现类的继承。子类可以继承父类的属性和方法，并可以添加自己的属性和方法。详情见上节:【TS】九天学会TS语法——4.TypeScript 接口深入解析
class ParentClass {// 父类属性和方法
}class ChildClass extends ParentClass {// 子类属性和方法
}
五、多态
多态是面向对象编程（OOP）中的一个核心概念，允许用同样的方式处理不同的对象，即使这些对象属于不同的类。
举个例子，你有一个画笔，你可以用它来画圆、画方形、画三角形等等。无论你画什么，你都是用同样的画笔，只是画的东西不同。
在编程中，多态就像画笔。你有一个方法（比如 draw()），它可以被不同的对象（比如 Circle、Rectangle、Triangle）使用。每个对象用自己的方式实现 draw() 方法，但你可以用同样的方式调用它，就像用画笔画画一样。
有了多态，可以编写更通用的代码，处理多种不同类型的对象，而不需要知道具体的对象类型，代码就更灵活、更可扩展。
在 TypeScript 中，多态通常通过接口、继承和重写来实现。
1.接口与多态
接口定义了一组规范，任何实现了该接口的类都必须遵循这些规范。通过接口，我们可以定义一个多态的行为，然后让不同的类来实现这个接口。
举个例子：
// 定义一个Animal接口，它包含一个方法makeSound
interface Animal {makeSound(): void; // makeSound方法没有参数，也没有返回值
}// Dog类实现了Animal接口，这意味着它必须提供makeSound方法的实现
class Dog implements Animal {makeSound() {console.log('Woof!'); // Dog类中的makeSound方法输出"Woof!"}
}// Cat类也实现了Animal接口，同样需要提供makeSound方法的实现
class Cat implements Animal {makeSound() {console.log('Meow!'); // Cat类中的makeSound方法输出"Meow!"}
}// 定义一个函数animalSound，它接受一个Animal类型的参数
function animalSound(animal: Animal) {animal.makeSound(); // 调用传入对象的makeSound方法
}// 创建Dog和Cat的实例
const dog = new Dog();
const cat = new Cat();// 调用animalSound函数，传入dog实例，输出"Woof!"
animalSound(dog); // 调用animalSound函数，传入cat实例，输出"Meow!"
animalSound(cat); 
Animal 接口定义了一个 makeSound 方法。Dog 和 Cat 类都实现了 Animal 接口，并且提供了自己的 makeSound 方法实现。animalSound 函数接受一个 Animal 类型的参数，并调用其 makeSound 方法。无论传入的是 Dog 还是 Cat 对象，animalSound 函数都能正确地调用对应的方法，这就是多态。
2.继承与多态
继承是另一种实现多态的方式。通过继承，子类可以继承父类的所有属性和方法，也可以添加新的属性和方法或者覆盖（重写）父类的方法。
class Animal {makeSound() {console.log('Some sound!');}
}class Dog extends Animal {makeSound() {super.makeSound(); // 调用父类的方法console.log('Woof!');}
}class Cat extends Animal {makeSound() {console.log('Meow!');}
}function animalSound(animal: Animal) {animal.makeSound();
}const dog = new Dog();
const cat = new Cat();animalSound(dog); // 输出: Some sound! Woof!
animalSound(cat); // 输出: Meow!
Animal 类有一个 makeSound 方法。Dog 和 Cat 类继承自 Animal 类，并重写了 makeSound 方法。animalSound 函数接受一个 Animal 类型的参数，并调用其 makeSound 方法。由于 Dog 和 Cat 都继承自 Animal，它们都可以作为 Animal 类型的参数传递给 animalSound 函数。
🚀感谢您的细心品读，完成了这篇关于【TS】九天学会TS语法——5.TypeScript的类的旅程。 🚀
🎉 您的每一个鼓励都是我不断更新的动力，不要忘记点赞收藏🎉
🔍 期待与您一同深入前端技术的海洋，共同探索那些未知的宝藏，揭开Web开发的层层迷雾。🔍
🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟