TypeScript类:面向对象编程的基石

一、从现实世界到代码世界

想象你要建造一栋房子,首先需要一张设计蓝图——它定义了房屋的结构(几个房间)、功能(卧室/厨房)和特性(材料/颜色)。在TypeScript中,class就是这个设计蓝图,而根据蓝图建造出来的具体房屋就是对象实例

二、类的核心组成

1. 基础类结构

class Smartphone {
    // 属性声明
    brand: string;
    storage: number;
    
    // 构造函数
    constructor(brand: string, storage: number) {
        this.brand = brand;
        this.storage = storage;
    }

    // 方法
    checkStorage(): string {
        return `${this.storage}GB remaining`;
    }
}

// 创建实例
const myPhone = new Smartphone("Pixel", 128);
console.log(myPhone.checkStorage()); // 输出:128GB remaining

2. 类成员修饰符

TypeScript通过访问修饰符增强了类的封装性:

修饰符访问范围示例代码
public所有地方(默认)public id: number
private仅类内部private secret: string
protected类及其子类protected key: string
readonly只读属性readonly serial: string
class BankAccount {
    private _balance: number; // 真正存储值的私有字段
    readonly accountNumber: string;

    constructor(initial: number, num: string) {
        this._balance = initial;
        this.accountNumber = num;
    }

    public get balance(): number { // 访问器属性
        return this._balance;
    }
}

const account = new BankAccount(1000, "622588");
console.log(account.balance);  // ✔ 允许访问
// account._balance = 5000;    // ❌ 编译错误

3. 继承与多态

// 基类
class Animal {
    constructor(public name: string) {}

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m`);
    }
}

// 派生类
class Snake extends Animal {
    constructor(name: string) {
        super(name); // 必须调用父类构造函数
    }

    // 方法重写
    override move(distance = 5) {
        console.log("Slithering...");
        super.move(distance); // 调用父类方法
    }
}

const sam = new Snake("Sammy");
sam.move(); // 输出:Slithering... Sammy moved 5m

三、高级类特性

1. 抽象类

abstract class Shape {
    abstract getArea(): number; // 抽象方法

    printArea() {
        console.log(`Area: ${this.getArea()}`);
    }
}

class Circle extends Shape {
    constructor(public radius: number) {
        super();
    }

    override getArea(): number {
        return Math.PI * this.radius ** 2;
    }
}

// const shape = new Shape(); // ❌ 错误:不能实例化抽象类
const circle = new Circle(5);
circle.printArea(); // 输出:Area: 78.5398...

2. 静态成员

class URLHelper {
    static BASE_DOMAIN = "https://api.example.com";

    static buildUserEndpoint(userId: number): string {
        return `${this.BASE_DOMAIN}/users/${userId}`;
    }
}

console.log(URLHelper.buildUserEndpoint(123)); 
// 输出:https://api.example.com/users/123

3. 方法重载

class Calculator {
    // 方法重载签名
    add(a: number, b: number): number;
    add(a: string, b: string): string;
    
    // 实现签名
    add(a: any, b: any): any {
        if (typeof a === "string") {
            return a + b;
        }
        return a + b;
    }
}

const calc = new Calculator();
console.log(calc.add(1, 2));    // 3
console.log(calc.add("1", "2"));// "12"

四、类与接口的协作

// 定义接口
interface Loggable {
    log(): void;
}

// 实现接口
class FileLogger implements Loggable {
    log() {
        console.log("Writing to file...");
    }
}

// 多接口实现
class DatabaseLogger implements Loggable {
    log() {
        console.log("Saving to database...");
    }
    connect() {
        console.log("Connecting DB...");
    }
}

五、最佳实践指南

  1. 单一职责原则
    每个类应该只有一个引起变化的原因

  2. 组合优于继承
    优先使用对象组合而不是类继承:

class Engine { /* ... */ }
class Car {
    constructor(private engine: Engine) {}
}
  1. 明确访问控制
    除非必要,否则属性都应设为private

  2. 避免深度继承
    继承层级建议不超过3层

  3. 合理使用抽象
    通过抽象类定义通用行为

六、常见误区提醒

❌ 误区1:认为private是绝对安全的
实际上编译后的JavaScript中私有属性仍然可见

❌ 误区2:过度使用继承
导致类之间高度耦合,增加维护难度

❌ 误区3:忽略super()调用
在派生类构造函数中忘记调用super()会导致错误

七、类与JavaScript的差异

特性TypeScriptJavaScript ES6
访问修饰符支持public/private/protected无原生支持
抽象类支持不支持
接口实现显式implements语法
属性声明类顶部显式声明在构造函数中初始化

结语

TypeScript类不仅保留了JavaScript的灵活性,还通过类型系统和面向对象特性,帮助开发者构建更健壮的应用程序。掌握类的使用是成为TypeScript开发者的重要一步,但记住:真正的面向对象设计不在于使用多少高级语法,而在于如何用合理的抽象解决实际问题。

如果对你有帮助,请帮忙点个赞

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/985062.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

韩国 KAIST激光雷达领域研究概况2025.3.12

一.KAIST背景简介 1.1 科研实力 KAIST在单光子激光雷达领域展现出强大的科研实力,拥有 超过50名专业科研人员 组成的研究团队。学校配备了 先进的光学实验室和精密仪器设备 ,为研究提供了坚实的硬件支持。 值得一提的是,KAIST还建立了 专门…

C++20 模块:告别头文件,迎接现代化的模块系统

文章目录 引言一、C20模块简介1.1 传统头文件的局限性1.2 模块的出现 二、模块的基本概念2.1 模块声明2.2 模块接口单元2.3 模块实现单元 三、模块的优势3.1 编译时间大幅减少3.2 更好的依赖管理3.3 命名空间隔离 四、如何使用C20模块4.1 编译器支持4.2 示例项目4.3 编译和运行…

vue3-computed计算属性和reactive响应式系统结合使用

1.前言 vue3中使用reactive函数创建一个响应式对象&#xff0c;当对象数据发生变化的时候&#xff0c;依赖这些数据的计算属性和模板会自动的更新。 2.实例 2.1 简写 <template><div><p>用户名: {{ userName }}</p><p>用户名的大写形式: {{ u…

prompt大师高效提示词解析

Prompt大师李继刚高效提示词示例解析 一、「汉语新解」提示词 核心结构 采用Lisp语言框架嵌套中文语义&#xff0c;通过(defun 新汉语老师 ()...)定义角色风格&#xff08;融合奥斯卡王尔德、鲁迅的批判性语言&#xff09;&#xff0c;用(隐喻 (一针见血...))构建解释逻辑链。…

【大模型最前沿技术应用与实践】

技术的最终形态 未来想打造垂类知识决策型 AI的应用&#xff0c;垂类知识决策型 AI 需要融合通用技术&#xff08;LLM、多模态&#xff09;与行业深度&#xff08;知识图谱、RAG&#xff09;&#xff0c;并通过 工具链整合&#xff08;Agents、RPA&#xff09; 实现场景落地。 …

【AI智能体报告】开源AI助手的革命:OpenManus深度使用报告

一、引言&#xff1a;当开源智能体走进生活 2025年3月&#xff0c;MetaGPT团队用一场"开源闪电战"改写了AI Agent的竞争格局。面对商业产品Manus高达10万元的邀请码炒作&#xff0c;他们仅用3小时便推出开源替代品OpenManus&#xff0c;首日即登顶GitHub趋势榜。 …

《用 python、MySQL 和 Chart.js 打造炫酷数据看板》实战案例笔记

今天&#xff0c;我们要构建一个数据看板系统。在这个过程中&#xff0c;我们会利用 MySQL 来存储数据&#xff0c;使用 Python 搭建后端 API&#xff0c;还会借助 Chart.js 在前端呈现各式各样的图表。 整个流程涵盖多个环节&#xff0c;首先要进行数据库表的设计&#xff0c…

LabVIEW闭环控制系统硬件选型与实时性能

在LabVIEW闭环控制系统的开发中&#xff0c;硬件选型直接影响系统的实时性、精度与稳定性。需综合考虑数据采集速度&#xff08;采样率、接口带宽&#xff09;、计算延迟&#xff08;算法复杂度、处理器性能&#xff09;、输出响应时间&#xff08;执行器延迟、控制周期&#x…

使用Process Explorer、Dependency Walker和PE信息查看工具快速排查dll动态库因库与库版本不一致导致的加载失败问题

目录 1、问题说明 2、使用Process Explorer查看目标dll动态库有没有动态加载起来 3、使用Dependency Walker查看xxpadll.dll库的库依赖关系&#xff0c;找到xxpadll.dll加载失败的原因 4、使用PE信息查看工具查看目标dll库的时间戳 5、关于xxsipstack2.dll中调用xxdatanet…

Python设计模式 - 建造者模式

定义 建造者模式是一种创建型设计模式&#xff0c;主要用于构建包含多个组成部分的复杂对象。它将对象的构建过程与表示分离&#xff0c;使得同样的构建过程可以创建不同的对象表示。 结构 抽象建造者&#xff08;Builder&#xff09;&#xff1a;声明创建产品的各个部件的方…

sparkTTS window 安装

SparkTTS 的简介 Spark-TTS是一种基于SpardAudio团队提出的 BiCodec 构建的新系统&#xff0c;BiCodec 是一种单流语音编解码器&#xff0c;可将语音策略性地分解为两种互补的标记类型&#xff1a;用于语言内容的低比特率语义标记和用于说话者特定属性的固定长度全局标记。这种…

高效微调算法 (Parameter-Efficient Fine-tuning, PEFT) 详解

引言 随着预训练语言模型 (Pre-trained Language Models, PLMs) 规模的持续膨胀&#xff0c;全参数微调 (Full Fine-tuning) 模式的局限性日益凸显。 全参数微调在下游任务上取得了显著的性能提升&#xff0c;但其高昂的计算和存储成本&#xff0c;以及为每个下游任务维护完整…

第十五届蓝桥杯大学B组(握手问题、小球反弹、好数)

一、握手问题 思路1&#xff1a; 1)先让所有人相互握手 第一个人49次 第二个人48次 第五十个人0次 共计01249 2)减去7个没握手的 016 #include<stdio.h> int main() {int a 50*49/2 - 7*6/2;printf("%d\n",a);return 0; } 运行结果&#xf…

若依框架-给sys_user表添加新字段并获取当前登录用户的该字段值

目录 添加字段 修改SysUser类 修改SysUserMapper.xml 修改user.js 前端获取字段值 添加字段 若依框架的sys_user表是没有age字段的&#xff0c;但由于业务需求&#xff0c;我需要新添加一个age字段&#xff1a; 修改SysUser类 添加age字段后&#xff0c;要在SysUser类 …

基于langchain+llama2的本地私有大语言模型实战

Langchain功能 LangChian 作为一个大语言模型&#xff08;LLM, Large Language Model&#xff09;开发框架&#xff0c;是 LLM 应用架构的重要一环。借助 LangChain&#xff0c;我们可以创建各种应用程序&#xff0c;包括聊天机器人和智能问答工具。 AI模型&#xff1a;包含各…

再聊 Flutter Riverpod ,注解模式下的 Riverpod 有什么特别之处,还有发展方向

三年前我们通过 《Flutter Riverpod 全面深入解析》 深入理解了 riverpod 的内部实现&#xff0c;而时隔三年之后&#xff0c;如今Riverpod 的主流模式已经是注解&#xff0c;那今天就让我们来聊聊 riverpod 的注解有什么特殊之处。 前言 在此之前&#xff0c;我们需要先回忆…

uniapp+Vue3 组件之间的传值方法

一、父子传值&#xff08;props / $emit 、ref / $refs&#xff09; 1、props / $emit 父组件通过 props 向子组件传递数据&#xff0c;子组件通过 $emit 触发事件向父组件传递数据。 父组件&#xff1a; // 父组件中<template><view class"container">…

Kafka×DeepSeek:智能决策破取经八十一难!

《西游记》的故事中&#xff0c;唐僧师徒四人历经九九八十一难&#xff0c;从东土大唐前往西天取经。一路上&#xff0c;火焰山酷热难耐、通天河水位忽高忽低、妖怪神出鬼没…… 现在&#xff0c;唐僧师徒取经路上的种种难题&#xff0c;在KafkaDeepSeek双引擎加持下有了全新解…

C# 委托使用详解

总目录 前言 在C#中&#xff0c;委托&#xff08;Delegate&#xff09; 是一种类型安全的函数指针机制&#xff0c;它允许我们将方法作为参数传递给其他方法&#xff0c;或者将方法存储在变量中。委托在 C# 中有广泛的应用&#xff0c;特别是在事件处理、异步编程和回调机制中…

axure11安装教程包含下载、安装、汉化、授权(附安装包)图文详细教程

文章目录 前言一、axure11安装包下载二、axure11安装教程1.启动安装程序2.安装向导界面3.安装协议协议页面2.选择安装位置3.开始安装4.完成安装 三、axure11汉化教程1.axure11汉化包2.axure11汉化设置 四、axure11授权教程1.打开axure112.设置使用方式3.输入许可证号4.axure11安…