面试题：TypeScript状态管理库类型架构设计之泛型与复用

Question

设计一个通用的状态管理函数，它可以接受不同类型的初始状态值。使用泛型来确保状态的类型安全。例如，初始状态可能是一个数字数组，也可能是一个包含字符串键值对的对象。同时，为这个函数设计一种机制，当状态发生变化时，可以触发一个回调函数，该回调函数接收新的状态作为参数。请写出完整的TypeScript代码实现。

Answer 1

type StateCallback<T> = (newState: T) => void;

function createStateManager<T>(initialState: T) {
    let state: T = initialState;
    const callbacks: StateCallback<T>[] = [];

    const getState = () => state;

    const setState = (newState: T) => {
        state = newState;
        callbacks.forEach(callback => callback(state));
    };

    const subscribe = (callback: StateCallback<T>) => {
        callbacks.push(callback);
        return () => {
            const index = callbacks.indexOf(callback);
            if (index!== -1) {
                callbacks.splice(index, 1);
            }
        };
    };

    return {
        getState,
        setState,
        subscribe
    };
}

你可以这样使用：

// 使用示例1：数字数组状态
const numberArrayStateManager = createStateManager<number[]>([]);
const unsubscribe1 = numberArrayStateManager.subscribe(newState => {
    console.log('数字数组状态变化:', newState);
});
numberArrayStateManager.setState([1, 2, 3]);
unsubscribe1();

// 使用示例2：字符串键值对对象状态
const objectStateManager = createStateManager<{ [key: string]: string }>({});
const unsubscribe2 = objectStateManager.subscribe(newState => {
    console.log('对象状态变化:', newState);
});
objectStateManager.setState({ name: 'John' });
unsubscribe2();