TypeScript 如何实现类
很多刚接触前端的朋友,可能写过不少用 JavaScript 写的“类”——毕竟JS里的类本质是函数加原型链,用起来灵活但有时候容易乱。比如写一个员工管理的小项目,用JS写员工类,要存姓名、工号,还要有计算加班费的方法,写的时候得反复确认this指向,不然一调用就报错。这时候TypeScript的类就能帮上大忙,它把JS的类做了规范升级,还加了类型校验,新手也能少踩坑。
先搞懂TypeScript类的基础:和JS类差在哪?
TypeScript的类是JavaScript类的超集,也就是说,你之前写的JS类代码,直接改成.ts文件就能用,还能加新特性。它最核心的区别是自带类型校验,比如你要定义一个员工类,得先告诉TypeScript:这个类的实例必须有姓名(字符串)、工号(数字),这就避免了后面传错类型的问题。

举个生活化的例子,你要做一个“奶茶杯”的模板,JS里的模板只写“杯子有容量、有温度”,但TypeScript会明确要求“容量必须是数字,温度必须是数字,不能随便传‘热’这种字符串”。
第一步:写最简单的TypeScript类
先从最基础的结构入手,用员工的例子来拆解。TypeScript类的核心是三部分:属性(就是类里存的信息,比如姓名、工号)、方法(类里能做的事,比如算加班费、打考勤)、构造函数(创建实例时自动运行的“初始化步骤”)。
写的时候不用想复杂,先写个空架子:
`typescript
class Employee {
// 先声明类的属性和类型
name: string;
id: number;
// 构造函数:创建实例时,必须给这两个属性传值
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
// 方法:输出员工信息,返回字符串
getInfo(): string {
return 员工${this.name},工号${this.id};
}
}
`
这段代码里,你能看到每个属性后面都加了类型(name: string),方法后面也加了返回值类型(: string),这就是TypeScript给类加的“规矩”——你要是传错类型,比如把工号写成"A001"(字符串),TypeScript会直接报错,比JS的隐式转换安全多了。
进阶用法:让类更实用,不用写重复代码
上面的代码虽然能跑,但有点啰嗦——属性和构造函数里的参数写了两遍,能不能简化?TypeScript有个参数属性的特性,把属性声明和构造参数合并,不用再写this.name = name,代码更简洁。
把上面的类改成简化版:
`typescript
class Employee {
// 直接在构造参数前加修饰符,自动变成类的属性
constructor(public name: string, public id: number) {}
getInfo(): string {
return 员工${this.name},工号${this.id};
}
}
`
这里的public是访问修饰符,意思是“这个属性谁都能访问”,就像奶茶杯的盖子是开放的,谁都能拿;还有private(只能类内部用,像奶茶杯的内盖,别人碰不到)、protected(子类能访问,比如奶茶杯的专属吸管,只有你能用来喝)。比如把工号设成私有的,外部不能直接改,只能通过类的方法修改,就避免了乱改数据的问题:
`typescript
class Employee {
constructor(public name: string, private id: number) {}
// 只能内部或子类调用,用来修改私有工号
changeId(newId: number): void {
if (newId > 0) this.id = newId; // 加个简单校验,防止乱改
}
}
`
实际用起来的小例子:创建员工实例
最后看看怎么用这个类,就像你用奶茶模板做一杯珍珠奶茶:
`typescript
// 创建一个员工实例,必须传name和id
const emp = new Employee("张三", 1001);
console.log(emp.getInfo()); // 输出:员工张三,工号1001
// emp.id; // 会报错:id是私有的,外部不能直接访问
emp.changeId(1002); // 正确,通过方法修改
console.log(emp.getInfo()); // 输出:员工张三,工号1002
`
你看,用TypeScript类,既能保证数据的正确性,又能通过修饰符控制访问权限,比JS的类更适合做大型项目,不会因为多人协作导致代码乱掉。
简单总结一下,TypeScript实现类,就是在JS类的基础上,加了类型校验和访问控制,让你写的类更规范、更安全,就像给“产品模板”加了清晰的使用说明,不会有人随便乱改里面的东西。