属性声明
在 TypeScript 中，类的属性必须先声明类型，这与 JavaScript 不同。未初始化的属性需要在构造函数中赋值，或使用 ! 或 ? 标记。
5.1 类的基本语法
TypeScript 中的面向对象编程
🎯 学习目标
- 掌握 TypeScript 类的基本语法
- 理解属性和方法的类型定义
- 学会构造函数的类型注解
- 了解类的类型声明
📝 类的定义
class User {
// 属性声明（必须有类型）
name: string;
age: number;
private id: string;
// 构造函数
constructor(name: string, age: number) {
this.name = name;
this.age = age;
this.id = Math.random().toString(36).substr(2, 9);
}
// 方法
greet(): string {
return `Hello, I'm ${this.name}`;
}
// 带参数的方法
setAge(newAge: number): void {
this.age = newAge;
}
}
const user = new User('Alice', 30);
console.log(user.greet()); // "Hello, I'm Alice"
💡
🔧 属性简写
// 使用参数属性简写
class User {
// 直接在构造函数参数中声明属性
constructor(
public name: string,
public age: number,
private id: string = Math.random().toString(36).substr(2, 9)
) {}
greet(): string {
return `Hello, I'm ${this.name}, ${this.age} years old`;
}
}
const user = new User('Bob', 25);
console.log(user.greet());
📊 类的类型
// 类的类型
interface IUser {
name: string;
age: number;
greet(): string;
}
// 类实现接口
class User implements IUser {
constructor(public name: string, public age: number) {}
greet(): string {
return `Hello, ${this.name}`;
}
}
// 使用类作为类型
function printUser(user: User): void {
console.log(user.greet());
}
// 类的构造签名
type UserConstructor = new (name: string, age: number) => User;
function createUser(Ctor: UserConstructor, name: string, age: number): User {
return new Ctor(name, age);
}
📝 本节小结
✅
- • 类属性必须声明类型
- • 使用参数属性简化构造函数
- • 类可以实现接口
- • 类可以作为类型使用