news 2026/5/1 1:56:48

TypeScript 类

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 类

TypeScript 中的类(Class)详解

TypeScript 的类(class)基于 ES6 类语法,并添加了强大的静态类型支持访问修饰符抽象类装饰器等特性,使其更接近传统面向对象语言(如 Java/C#),同时完全兼容 JavaScript。

1. 基本类声明与实例化
classPerson{name:string;// 实例属性(需手动声明)age:number;constructor(name:string,age:number){this.name=name;this.age=age;}greet():void{console.log(`Hello, I'm${this.name}`);}}letalice=newPerson("Alice",30);alice.greet();// "Hello, I'm Alice"

参数属性简写(推荐,减少冗余):

classPerson{constructor(publicname:string,// 自动声明 public name 并赋值privateage:number// 自动声明 private age 并赋值){}greet():void{console.log(`Hello, I'm${this.name}`);// console.log(this.age); // OK,在类内部可访问}}letbob=newPerson("Bob",25);console.log(bob.name);// OK// console.log(bob.age); // 错误:private
2. 访问修饰符(Access Modifiers)
修饰符作用范围示例
public默认,所有地方可访问public name: string
private仅类内部可访问private secret: string
protected类内部及子类可访问protected familyName: string
readonly只读(不能重新赋值,可结合以上)readonly id: number
classEmployee{constructor(publicname:string,privatesalary:number,protecteddepartment:string,readonlyid:number){}getInfo(){console.log(this.salary);// OKconsole.log(this.department);// OK}}classManagerextendsEmployee{manage(){// console.log(this.salary); // 错误:privateconsole.log(this.department);// OK:protected}}
3. 静态成员(Static Members)

属于类本身,而不是实例:

classMathUtils{staticPI:number=3.14159;staticcircleArea(radius:number):number{returnthis.PI*radius**2;}}console.log(MathUtils.PI);// 3.14159console.log(MathUtils.circleArea(5));// 通过类名调用
4. 类继承(Extends)与 super
classAnimal{constructor(publicname:string){}move(distance:number=0){console.log(`${this.name}moved${distance}m.`);}}classDogextendsAnimal{constructor(name:string,publicbreed:string){super(name);// 必须调用 super()}bark(){console.log("Woof!");}move(distance:number=5){super.move(distance);// 调用父类方法console.log("Dog is running!");}}letdog=newDog("Buddy","Golden");dog.bark();dog.move();// 先调用 Animal.move,再输出 "Dog is running!"
5. 抽象类(Abstract Class)

不能直接实例化,用于定义子类必须实现的成员:

abstractclassShape{abstractgetArea():number;// 抽象方法,必须在子类实现move(x:number,y:number){console.log(`Moved to (${x},${y})`);}}classCircleextendsShape{constructor(publicradius:number){super();}getArea():number{returnMath.PI*this.radius**2;}}letcircle=newCircle(10);console.log(circle.getArea());// let shape = new Shape(); // 错误:不能实例化抽象类
6. 类实现接口(Implements)

类可以实现一个或多个接口:

interfacePrintable{print():void;}interfaceLoggable{log(message:string):void;}classDocumentimplementsPrintable,Loggable{constructor(publictitle:string){}print(){console.log(`Printing${this.title}`);}log(message:string){console.log(`[${this.title}]${message}`);}}
7. getter / setter
classRectangle{constructor(private_width:number,private_height:number){}getarea():number{returnthis._width*this._height;}setwidth(value:number){if(value<=0)thrownewError("宽度必须正数");this._width=value;}}letrect=newRectangle(10,5);console.log(rect.area);// 50(调用 getter)rect.width=20;// 调用 setter
8. 类作为类型使用
classCar{constructor(publicbrand:string){}}letmyCar:Car=newCar("Tesla");functiondrive(vehicle:Car){console.log(`Driving${vehicle.brand}`);}
9. 装饰器(Decorators)—— 实验性特性(需启用experimentalDecorators

常用于框架(如 Angular、NestJS):

functionsealed(target:Function){Object.seal(target);Object.seal(target.prototype);}@sealedclassGreeter{greeting:string;constructor(message:string){this.greeting=message;}}
10. 最佳实践建议
建议说明
使用参数属性简写减少 constructor 冗余
优先使用privatereadonly封装性更好
抽象类用于定义通用行为强制子类实现关键方法
接口 + 类组合使用接口定义合约,类实现细节
静态成员用于工具方法/常量如配置、工厂方法
开启strictPropertyInitialization强制非 undefined 属性在 constructor 初始化
小结:类特性速查表
特性语法示例
基本类class Person { constructor(public name: string) {} }
访问修饰符private age: number
静态成员static count: number = 0
继承class Dog extends Animal {}
抽象类/方法abstract class Shape { abstract draw(): void; }
实现接口class User implements Printable {}
getter/setterget fullName(): string { return ... }

TypeScript 的类系统结合了现代 JS 的灵活性和强类型检查,是构建大型、可维护应用的核心工具,尤其在 Angular、NestJS 等框架中广泛使用。

如果您想深入某个部分(如泛型类装饰器实战类与模块的结合、或设计模式实现),请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 5:48:48

Excalidraw手势操作支持情况(触屏/平板)

Excalidraw 手势操作支持深度解析&#xff08;触屏/平板&#xff09; 在远程协作日益成为常态的今天&#xff0c;团队对“随时随地白板讨论”的需求从未如此迫切。无论是产品原型草图、系统架构推演&#xff0c;还是线上教学演示&#xff0c;一个能自然响应手指或触控笔输入的虚…

作者头像 李华
网站建设 2026/4/18 10:45:06

Open-AutoGLM指令集优化实战(专家级调优技巧大公开)

第一章&#xff1a;Open-AutoGLM指令集优化概述Open-AutoGLM 是面向生成式语言模型推理过程的高性能指令集优化框架&#xff0c;旨在通过底层指令重构与硬件协同设计&#xff0c;显著提升大模型在边缘设备和通用服务器上的执行效率。该框架融合了动态算子融合、稀疏化感知执行与…

作者头像 李华
网站建设 2026/5/1 5:48:00

大数据技术的基于Python的王者荣耀战队的游戏数据分析系统设计与实现20240516--论文-爬虫 可视化

文章目录系统截图项目简介大数据系统开发流程主要运用技术介绍爬虫核心代码展示结论源码文档获取定制开发/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&#xff01;系统截图 大数据技术的基于Python的王者荣耀战队的游戏数据分析系统设计与实现20240516–论文…

作者头像 李华
网站建设 2026/5/1 5:48:07

5、图像打印、幻灯片制作与媒体播放指南

图像打印、幻灯片制作与媒体播放指南 一、图像打印 在计算机中打印图像是一项常见需求,以下是详细步骤: 1. 选择图像 :在“Pictures”文件夹中,选择想要打印的一张或多张图像。可以单独打印单张图像,也能选择多张图像,且多张图像既可以逐张打印,也能在每张纸上打印…

作者头像 李华
网站建设 2026/4/28 21:57:21

Excalidraw开源社区对AI功能的反馈汇总

Excalidraw开源社区对AI功能的反馈汇总 在远程协作日益成为常态的今天&#xff0c;技术团队、产品设计和教育工作者对可视化工具的需求早已不再局限于“能画图”——他们需要的是一个既能激发创意、又能快速表达想法的数字白板。Excalidraw 正是在这样的背景下脱颖而出&#x…

作者头像 李华
网站建设 2026/4/25 18:58:43

Excalidraw服务器部署资源需求估算

Excalidraw 服务器部署资源需求估算 在远程协作成为常态的今天&#xff0c;团队对高效、安全、可定制的可视化工具需求愈发迫切。工程师在设计系统架构时&#xff0c;产品经理在绘制产品原型时&#xff0c;设计师在构思交互流程时&#xff0c;都希望有一个轻量但功能完整的白板…

作者头像 李华