面试题：TypeScript泛型类在复杂场景下的应用

class StateManager<T> {
    private state: T;
    private subscribers: ((newState: T) => void)[] = [];

    constructor(initialState: T) {
        this.state = initialState;
    }

    getState(): T {
        return this.state;
    }

    setState(newState: T): void {
        this.state = newState;
        this.notifySubscribers();
    }

    subscribe(callback: (newState: T) => void): void {
        this.subscribers.push(callback);
    }

    unsubscribe(callback: (newState: T) => void): void {
        this.subscribers = this.subscribers.filter(sub => sub!== callback);
    }

    private notifySubscribers(): void {
        this.subscribers.forEach(subscriber => subscriber(this.state));
    }
}

泛型类型参数定义

StateManager类使用一个泛型类型参数T，这个T代表状态的类型。它可以是任何类型，无论是基本类型（如number、string）还是复杂的对象类型。

关键方法实现

构造函数：接受一个初始状态initialState，并将其赋值给类的state属性。
getState方法：返回当前的状态。
setState方法：更新状态为新的newState，并调用notifySubscribers方法通知所有订阅者。
subscribe方法：接受一个回调函数callback，将其添加到subscribers数组中，这个回调函数会在状态更新时被调用。
unsubscribe方法：接受一个回调函数callback，从subscribers数组中移除该回调函数。
notifySubscribers方法：遍历subscribers数组，依次调用每个订阅者的回调函数，并将新的状态作为参数传递。

确保类型安全

泛型T确保了状态的类型在整个类中保持一致。无论是初始状态的设置、状态的获取、更新还是订阅回调函数的参数，都使用相同的T类型，从而避免了类型不匹配的错误。
TypeScript的静态类型检查机制在编译时会检查代码中对StateManager类的使用是否符合类型定义，进一步确保类型安全。

不同场景下的使用

基本类型状态管理：

// 创建一个管理number类型状态的StateManager实例
const numberStateManager = new StateManager<number>(0);

// 订阅状态变化
numberStateManager.subscribe((newState) => {
    console.log(`Number state changed to: ${newState}`);
});

// 更新状态
numberStateManager.setState(1);

对象类型状态管理：

// 定义一个对象类型
interface User {
    name: string;
    age: number;
}

// 创建一个管理User类型状态的StateManager实例
const userStateManager = new StateManager<User>({ name: 'John', age: 30 });

// 订阅状态变化
userStateManager.subscribe((newState) => {
    console.log(`User state changed to: ${JSON.stringify(newState)}`);
});

// 更新状态
userStateManager.setState({ name: 'Jane', age: 31 });

星途面试题库

面试题：TypeScript泛型类在复杂场景下的应用

知识考点

面试题答案

泛型类型参数定义

关键方法实现

确保类型安全

不同场景下的使用