TypeScript类 #

一、类的基本概念 #

1.1 类的定义 #

类是面向对象编程的基础，用于创建对象的模板。

typescript 
class User {
    name: string;
    age: number;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    
    greet(): string {
        return `Hello, I'm ${this.name}!`;
    }
}

const user = new User('Alice', 25);
console.log(user.greet());

1.2 类的成员 #

typescript 
class Point {
    x: number;
    y: number;
    
    constructor(x: number = 0, y: number = 0) {
        this.x = x;
        this.y = y;
    }
    
    move(dx: number, dy: number): void {
        this.x += dx;
        this.y += dy;
    }
    
    toString(): string {
        return `(${this.x}, ${this.y})`;
    }
}

二、属性 #

2.1 实例属性 #

typescript 
class User {
    name: string;
    age: number;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

2.2 属性简写 #

typescript 
class User {
    constructor(
        public name: string,
        public age: number
    ) {}
}

const user = new User('Alice', 25);
console.log(user.name, user.age);

2.3 默认值 #

typescript 
class User {
    name: string = 'Anonymous';
    age: number = 0;
    active: boolean = true;
}

const user = new User();
console.log(user.name, user.age, user.active);

2.4 只读属性 #

typescript 
class User {
    readonly id: number;
    name: string;
    
    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const user = new User(1, 'Alice');
user.id = 2;
user.name = 'Bob';

2.5 静态属性 #

typescript 
class User {
    static count: number = 0;
    
    constructor(public name: string) {
        User.count++;
    }
    
    static getCount(): number {
        return User.count;
    }
}

const user1 = new User('Alice');
const user2 = new User('Bob');
console.log(User.getCount());

三、方法 #

3.1 实例方法 #

typescript 
class Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
    
    subtract(a: number, b: number): number {
        return a - b;
    }
}

const calc = new Calculator();
console.log(calc.add(1, 2));

3.2 静态方法 #

typescript 
class MathUtils {
    static PI: number = 3.14159;
    
    static square(x: number): number {
        return x * x;
    }
    
    static cube(x: number): number {
        return x * x * x;
    }
}

console.log(MathUtils.PI);
console.log(MathUtils.square(5));

3.3 getter和setter #

typescript 
class User {
    private _name: string = '';
    
    get name(): string {
        return this._name;
    }
    
    set name(value: string) {
        if (value.length < 2) {
            throw new Error('Name is too short');
        }
        this._name = value;
    }
}

const user = new User();
user.name = 'Alice';
console.log(user.name);

3.4 只读getter #

typescript 
class Circle {
    constructor(private _radius: number) {}
    
    get radius(): number {
        return this._radius;
    }
    
    get area(): number {
        return Math.PI * this._radius ** 2;
    }
    
    get circumference(): number {
        return 2 * Math.PI * this._radius;
    }
}

const circle = new Circle(5);
console.log(circle.radius);
console.log(circle.area);
console.log(circle.circumference);

四、构造函数 #

4.1 基本构造函数 #

typescript 
class User {
    name: string;
    age: number;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

4.2 参数属性 #

typescript 
class User {
    constructor(
        public name: string,
        public age: number
    ) {}
}

const user = new User('Alice', 25);

4.3 构造函数重载 #

typescript 
class User {
    name: string;
    age: number;
    
    constructor(name: string);
    constructor(name: string, age: number);
    constructor(name: string, age?: number) {
        this.name = name;
        this.age = age ?? 0;
    }
}

const user1 = new User('Alice');
const user2 = new User('Bob', 25);

4.4 私有构造函数 #

typescript 
class Singleton {
    private static instance: Singleton;
    
    private constructor() {}
    
    static getInstance(): Singleton {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }
}

const instance = Singleton.getInstance();

五、访问修饰符 #

5.1 public #

public是默认的访问修饰符，成员可以在任何地方访问。

typescript 
class User {
    public name: string;
    
    constructor(name: string) {
        this.name = name;
    }
}

const user = new User('Alice');
console.log(user.name);

5.2 private #

private成员只能在类内部访问。

typescript 
class User {
    private password: string;
    
    constructor(password: string) {
        this.password = password;
    }
    
    checkPassword(input: string): boolean {
        return this.password === input;
    }
}

const user = new User('secret');
console.log(user.password);
console.log(user.checkPassword('secret'));

5.3 protected #

protected成员可以在类内部和子类中访问。

typescript 
class Animal {
    protected name: string;
    
    constructor(name: string) {
        this.name = name;
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    
    bark(): void {
        console.log(`${this.name} barks!`);
    }
}

const dog = new Dog('Max');
dog.bark();
console.log(dog.name);

5.4 readonly #

readonly修饰符使属性只读。

typescript 
class User {
    readonly id: number;
    
    constructor(id: number) {
        this.id = id;
    }
}

const user = new User(1);
user.id = 2;

5.5 组合使用 #

typescript 
class User {
    public readonly id: number;
    private _password: string;
    protected createdAt: Date;
    
    constructor(id: number, password: string) {
        this.id = id;
        this._password = password;
        this.createdAt = new Date();
    }
}

六、抽象类 #

6.1 定义抽象类 #

typescript 
abstract class Animal {
    abstract makeSound(): void;
    
    move(): void {
        console.log('Moving...');
    }
}

class Dog extends Animal {
    makeSound(): void {
        console.log('Woof!');
    }
}

const dog = new Dog();
dog.makeSound();
dog.move();

6.2 抽象属性 #

typescript 
abstract class Shape {
    abstract get area(): number;
    abstract get perimeter(): number;
    
    describe(): void {
        console.log(`Area: ${this.area}, Perimeter: ${this.perimeter}`);
    }
}

class Rectangle extends Shape {
    constructor(
        private width: number,
        private height: number
    ) {
        super();
    }
    
    get area(): number {
        return this.width * this.height;
    }
    
    get perimeter(): number {
        return 2 * (this.width + this.height);
    }
}

七、类实现接口 #

7.1 实现接口 #

typescript 
interface Printable {
    print(): void;
}

class Document implements Printable {
    print(): void {
        console.log('Printing document...');
    }
}

7.2 实现多个接口 #

typescript 
interface Printable {
    print(): void;
}

interface Serializable {
    serialize(): string;
}

class Document implements Printable, Serializable {
    print(): void {
        console.log('Printing...');
    }
    
    serialize(): string {
        return 'Document content';
    }
}

7.3 接口继承类 #

typescript 
class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select(): void {
        console.log('Button selected');
    }
}

八、泛型类 #

8.1 基本泛型类 #

typescript 
class Box<T> {
    private value: T;
    
    constructor(value: T) {
        this.value = value;
    }
    
    getValue(): T {
        return this.value;
    }
    
    setValue(value: T): void {
        this.value = value;
    }
}

const stringBox = new Box<string>('hello');
const numberBox = new Box<number>(123);

8.2 泛型约束 #

typescript 
interface Lengthwise {
    length: number;
}

class Container<T extends Lengthwise> {
    private value: T;
    
    constructor(value: T) {
        this.value = value;
    }
    
    getLength(): number {
        return this.value.length;
    }
}

const container = new Container('hello');
console.log(container.getLength());

九、实用示例 #

9.1 链式调用 #

typescript 
class QueryBuilder {
    private query: string = '';
    
    select(columns: string): this {
        this.query += `SELECT ${columns} `;
        return this;
    }
    
    from(table: string): this {
        this.query += `FROM ${table} `;
        return this;
    }
    
    where(condition: string): this {
        this.query += `WHERE ${condition} `;
        return this;
    }
    
    build(): string {
        return this.query.trim();
    }
}

const query = new QueryBuilder()
    .select('*')
    .from('users')
    .where('age > 18')
    .build();

9.2 事件发射器 #

typescript 
class EventEmitter<T extends string> {
    private listeners: Map<T, Function[]> = new Map();
    
    on(event: T, callback: Function): void {
        if (!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        this.listeners.get(event)!.push(callback);
    }
    
    emit(event: T, ...args: any[]): void {
        const callbacks = this.listeners.get(event);
        if (callbacks) {
            callbacks.forEach(callback => callback(...args));
        }
    }
    
    off(event: T, callback: Function): void {
        const callbacks = this.listeners.get(event);
        if (callbacks) {
            const index = callbacks.indexOf(callback);
            if (index !== -1) {
                callbacks.splice(index, 1);
            }
        }
    }
}

十、总结 #

本章介绍了TypeScript类的基础概念：

类的成员 #

  1. 属性：实例属性、静态属性、只读属性
  2. 方法：实例方法、静态方法、getter/setter
  3. 构造函数：初始化对象

访问修饰符 #

  1. public：公开访问（默认）
  2. private：私有访问
  3. protected：保护访问
  4. readonly：只读属性

高级特性 #

  1. 抽象类：定义抽象方法
  2. 接口实现：实现接口规范
  3. 泛型类：类型参数化
最后更新：2026-03-26