当前位置： 首页 > news >正文

TypeScript与面向对象编程

news 来源：原创 2024/9/20 8:01:09

引言

TypeScript简介

TypeScript是JavaScript的一个超集，由微软开发，它在JavaScript的基础上添加了类型系统和对ES6+的新特性的支持。TypeScript最终会被编译成纯JavaScript代码，以便在任何支持JavaScript的环境中运行。

面向对象编程（OOP）概念

面向对象编程是一种编程范式，它使用“对象”来设计软件。对象可以包含数据（通常称为属性）和代码（通常称为方法）。

面向对象编程基础

面向对象编程（OOP）是一种编程范式，它使用“对象”来设计软件。对象是类的实例，包含了数据和操作数据的方法。OOP的核心概念包括类、对象、继承、封装和多态。

类（Class）

类是创建对象的蓝图或模板。它定义了对象将拥有的属性（数据）和方法（行为）。类可以看作是创建对象的“工厂”。

对象（Object）

对象是类的实例。每个对象都有自己的属性和方法的副本。对象是实际存在于程序中的实体，可以接收消息、处理数据和发送消息。

继承（Inheritance）

继承是面向对象编程中的一种机制，它允许一个类（子类）继承另一个类（父类）的属性和方法。这有助于代码复用和创建一个层次化的类结构。

封装（Encapsulation）

封装是将数据（属性）和操作数据的代码（方法）绑定在一起的过程，形成一个独立的对象，并对外隐藏对象的实现细节。封装的目的是保护对象内部的状态，只通过公共的接口与外界交互。

多态（Polymorphism）

多态是指允许不同类的对象对同一消息做出响应的能力。在OOP中，多态通常通过继承和接口实现。多态使得代码更加灵活和可扩展。

TypeScript中的类和对象

类的定义和使用

在TypeScript中，类是创建对象的蓝图。类定义了对象的属性和方法。TypeScript类的定义使用class关键字，可以包含属性、构造函数、方法等。

class Person {// 类属性name: string;age: number;// 构造函数constructor(name: string, age: number) {this.name = name;this.age = age;}// 类方法greet() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}
}

对象的创建和属性访问

使用new关键字可以创建类的实例，即对象。通过对象，可以访问类的属性和方法。

const person = new Person('Alice', 30);
person.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

类的构造函数和方法

构造函数

构造函数是类的一个特殊方法，它在创建对象时自动调用。构造函数用于初始化对象的属性。

class Rectangle {width: number;height: number;constructor(width: number, height: number) {this.width = width;this.height = height;}
}
方法

类的方法定义了对象可以执行的操作。方法可以访问类的属性和执行逻辑。

class Circle {radius: number;constructor(radius: number) {this.radius = radius;}// 计算圆的面积calculateArea(): number {return Math.PI * this.radius * this.radius;}
}

类的访问修饰符

TypeScript支持访问修饰符，用于控制类成员的可见性：

  • public（默认）：成员可以在任何地方被访问。
  • private：成员只能在类的内部被访问。
  • protected：成员可以在类及其子类中被访问。
class Vehicle {private brand: string;constructor(brand: string) {this.brand = brand;}// 只能在类内部访问private displayBrand() {console.log(`Vehicle brand: ${this.brand}`);}
}const vehicle = new Vehicle('Toyota');
// vehicle.displayBrand(); // 错误：Property 'displayBrand' is private and only accessible within class 'Vehicle'.

类的静态成员

静态成员属于类本身，而不是类的实例。静态成员通过static关键字定义。

class Utility {static PI = 3.14159;static calculateCircumference(radius: number) {return 2 * Utility.PI * radius;}
}console.log(Utility.calculateCircumference(5)); // 输出: 31.4159

 总的来说，我认为类就是一个可以快捷的，可以快速创造出有相同特征的对象的工厂

TypeScript的继承

继承的基本概念

继承允许子类继承父类的属性和方法，这样子类就可以使用父类的代码，而不需要重新编写相同的代码。继承是面向对象编程中实现代码复用的一种方式。

使用extends关键字实现继承

在TypeScript中，使用extends关键字来创建一个类的子类。子类继承父类的所有属性和方法，并且可以添加新的属性和方法或者重写父类的方法。

class Animal {name: string;constructor(name: string) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {// Dog类继承了Animal类的属性和方法speak() {console.log(`${this.name} barks.`);}
}

方法重写和super关键字的使用

在子类中，我们可以通过重写方法来提供特定于子类的实现。如果子类需要调用父类的方法，可以使用super关键字。

class Cat extends Animal {speak() {console.log(`${this.name} meows.`);}// 调用父类的speak方法makeNoise() {super.speak(); // 输出: Cat name makes a noise.console.log(`${this.name} also meows.`);}
}

在上面的例子中，Cat类重写了Animal类的speak方法，并且在makeNoise方法中使用super.speak()调用了父类的speak方法。

继承的其他特性

  • 构造函数的继承：如果子类有构造函数，它必须首先调用super()来调用父类的构造函数。
  • 访问修饰符：在子类中，可以使用public、protected和private访问修饰符来控制继承的属性和方法的可见性。
  • 静态成员的继承：子类可以继承父类的静态成员。

他的存在有什么意义呢？我们可以通过一个比较广泛的类来扩展出他的一些子类，比如说我有一个类叫‘动物’，  然后我想创建 ‘狗’， ‘猫’，通过继承‘动物’来创建类的话就不用重新把‘动物’的属性与方法重写一遍了，直接继承就可以了，这样可以少些很多代码

TypeScript的封装

封装的意义和实现方式

封装的意义在于：

1.数据隐藏：通过封装，可以隐藏对象的内部状态，只暴露必要的操作接口给外部，从而保护对象的数据不被外部直接访问和修改。

2.模块化：封装有助于将代码组织成独立的模块，每个模块负责自己的数据和操作，使得代码更加模块化和易于管理。

3.灵活性：封装允许对象的内部实现细节发生变化，而不会影响到使用该对象的外部代码，提高了代码的灵活性和可维护性。

在TypeScript中，实现封装的方式主要是通过访问修饰符来控制属性和方法的可见性。

访问修饰符的使用

TypeScript提供了以下访问修饰符：

  • public：默认修饰符，表示成员可以在任何地方被访问。
  • private：表示成员只能在类的内部被访问。
  • protected：表示成员可以在类及其子类中被访问。

属性和方法的封装

在TypeScript中，我们可以通过访问修饰符来封装属性和方法：

class Person {private name: string; // 私有属性，只能在类内部访问constructor(name: string) {this.name = name;}public getName(): string { // 公有方法，可以在类外部访问return this.name;}protected getInternalName(): string { // 受保护的方法，只能在类及其子类中访问return `Internal Name: ${this.name}`;}
}class Employee extends Person {public getEmployeeName(): string {return this.getInternalName(); // 子类可以访问受保护的方法}
}const person = new Person('Alice');
console.log(person.getName()); // 输出: Alice
// console.log(person.name); // 错误：Property 'name' is private and only accessible within class 'Person'.

TypeScript的封装

多态的概念和重要性

多态（Polymorphism）意味着“多种形态”。在编程中，它指的是同一个操作作用于不同的对象，可以有不同的解释和不同的执行结果。多态允许我们使用通用的接口来操作不同类型的对象，从而提高代码的可复用性和可维护性。

多态的重要性体现在：

1.代码复用：通过多态，我们可以编写通用的代码来处理不同类型的对象，减少了代码的重复。

2.可扩展性：多态使得添加新的对象类型变得更加容易，因为它们可以遵循已有的接口。

3.灵活性：多态允许我们延迟绑定，即在运行时确定对象的类型和方法的实现，增加了程序的灵活性。

抽象类和接口的使用

在TypeScript中，多态通常通过抽象类和接口来实现。

抽象类

抽象类是不能被实例化的类，它通常包含一个或多个抽象方法。抽象方法是只有声明没有具体实现的方法，它们必须在子类中被实现。

abstract class Animal {abstract makeSound(): void; // 抽象方法move(): void {console.log('Animal moves');}
}class Dog extends Animal {makeSound(): void {console.log('Dog barks');}
}const dog = new Dog();
dog.makeSound(); // 输出: Dog barks
dog.move(); // 输出: Animal moves
接口

接口定义了一组方法的规范，但不提供这些方法的具体实现。类可以实现一个或多个接口，这意味着类必须实现接口中定义的所有方法。

interface Singer {sing(): void;
}class Musician implements Singer {sing(): void {console.log('Musician is singing');}
}const musician = new Musician();
musician.sing(); // 输出: Musician is singing

实现多态的示例

多态通常通过继承和接口实现。下面是一个使用抽象类和接口实现多态的示例：

interface Vehicle {start(): void;
}abstract class Car implements Vehicle {abstract start(): void;
}class ElectricCar extends Car {start(): void {console.log('Electric car starts silently');}
}class PetrolCar extends Car {start(): void {console.log('Petrol car starts with engine noise');}
}const electricCar = new ElectricCar();
electricCar.start(); // 输出: Electric car starts silentlyconst petrolCar = new PetrolCar();
petrolCar.start(); // 输出: Petrol car starts with engine noise

TypeScript 泛型

泛型的基本概念

泛型可以理解为类型变量，它代表了一个或多个类型。在定义泛型时，你可以使用一个或多个类型变量来表示这些类型。这些类型变量在使用时会被实际的类型所替换。

泛型的使用

泛型函数

泛型函数允许你定义一个或多个类型参数，这些类型参数在函数被调用时会被指定。

function identity<T>(arg: T): T {return arg;
}let output = identity<string>("myString");
// 或者使用类型推断
let output = identity("myString");

在这个例子中，identity函数有一个类型参数T，它表示函数可以接受任何类型的参数，并返回相同类型的值。

泛型接口

泛型接口允许你定义一个或多个类型参数，这些类型参数在实现接口时会被指定。

interface GenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = identity;

在这个例子中，GenericIdentityFn是一个泛型接口，它有一个类型参数T。identity函数实现了这个接口，并指定了T为number类型。

泛型类

泛型类允许你定义一个或多个类型参数，这些类型参数在创建类的实例时会被指定。

class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

在这个例子中，GenericNumber是一个泛型类，它有一个类型参数T。创建GenericNumber类的实例时，必须指定T的类型。

泛型约束

泛型约束允许你限制可以用于泛型参数的类型。通过使用extends关键字，你可以指定泛型参数必须满足的接口。

interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);  // Now we know it has a .length property, so no more errorreturn arg;
}

在这个例子中，loggingIdentity函数有一个泛型参数T，它必须满足Lengthwise接口，即必须有一个length属性。

泛型的好处

使用泛型可以带来以下好处：

  • 类型安全：泛型确保在编译时检查类型，避免类型错误。
  • 代码复用：泛型允许你编写可适用于多种数据类型的代码，提高代码的复用性。
  • 灵活性：泛型使得函数、接口或类可以灵活地处理不同类型的数据，而不需要为每种类型编写重复的代码。

总结

TypeScript结合OOP特性如类、继承、封装、多态和泛型，提供了强大的工具集来构建可维护、可扩展和类型安全的应用程序。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Flutter动画详解第二篇之显式动画(Explicit Animations)
  • ArduPilot开源代码之AP_DAL_RangeFinder
  • 详解数据结构之队列、循环队列(源码)
  • filebeat，kafka，clickhouse，ClickVisual搭建轻量级日志平台
  • 【Spring Security】初识Spring Security
  • Web 3.0革新：社交金融与边玩边赚开启用户数据主权时代
  • Spring Data Jpa 原生SQL联表查询返回自定义DTO
  • 低空经济未来出行，evtol飞行器技术前景分析
  • 三字棋游戏（C语言详细解释）
  • layui 监听弹窗关闭并刷新父级table
  • 应用层——HTTP
  • 42、PHP 实现把二叉树打印成多行
  • 【补】【康复学习--LeetCode每日一题】1186. 删除一次得到子数组最大和
  • 企业级-PDF图片水印
  • 【React】事件绑定、React组件、useState、基础样式
  • 《Java编程思想》读书笔记-对象导论
  • 230. Kth Smallest Element in a BST
  • CentOS6 编译安装 redis-3.2.3
  • C语言笔记（第一章：C语言编程）
  • docker容器内的网络抓包
  • Js基础知识（一） - 变量
  • js数组之filter
  • Python学习笔记 字符串拼接
  • ReactNative开发常用的三方模块
  • vue2.0一起在懵逼的海洋里越陷越深（四）
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 工程优化暨babel升级小记
  • 关于使用markdown的方法（引自CSDN教程）
  • 猴子数据域名防封接口降低小说被封的风险
  • 技术发展面试
  • 前端之React实战：创建跨平台的项目架构
  • 设计模式（12）迭代器模式（讲解+应用）
  • 使用common-codec进行md5加密
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件（包含源代码）
  • 手机端车牌号码键盘的vue组件
  • 运行时添加log4j2的appender
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • ‌U盘闪一下就没了？‌如何有效恢复数据
  • #stm32驱动外设模块总结w5500模块
  • #宝哥教你#查看jquery绑定的事件函数
  • $$$$GB2312-80区位编码表$$$$
  • $refs 、$nextTic、动态组件、name的使用
  • (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解
  • （机器学习的矩阵）（向量、矩阵与多元线性回归）
  • （十）【Jmeter】线程（Threads(Users)）之jp@gc - Stepping Thread Group (deprecated)
  • (五)IO流之ByteArrayInput/OutputStream
  • (原)本想说脏话,奈何已放下
  • ***原理与防范
  • .ai域名是什么后缀？
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .Net Memory Profiler的使用举例
  • .net 调用php,php 调用.net com组件 --
  • .NET 反射的使用
  • .Net 路由处理厉害了