MST

星途 面试题库

面试题:TypeScript可选与剩余参数在设计模式中的应用

在前端开发中运用TypeScript实现一个基于策略模式的功能模块。模块中有一个主函数,接受一个必选的初始状态对象,一个可选的配置对象,以及任意数量的策略函数作为剩余参数。这些策略函数将对初始状态对象进行不同的操作,配置对象用于控制策略函数的执行方式(比如某些策略函数是否跳过)。请详细阐述你的设计思路,包括如何使用TypeScript类型系统来确保类型安全,并编写完整的TypeScript代码实现该模块。
17.5万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

设计思路

  1. 定义类型
    • 首先定义初始状态对象的类型,由于不清楚具体结构,这里用Record<string, any>来表示一个任意属性的对象。
    • 配置对象类型定义为一个对象,其属性根据实际控制策略函数执行方式来确定,这里假设它有一个skipStrategies属性,类型为策略函数名称的字符串数组,用于表示需要跳过的策略函数。
    • 策略函数类型定义为接受初始状态对象并返回修改后的状态对象的函数。
  2. 主函数实现
    • 主函数接受初始状态对象、配置对象(可选)和策略函数数组作为参数。
    • 在函数内部,遍历策略函数数组,根据配置对象中的skipStrategies属性决定是否执行某个策略函数。
    • 每个策略函数执行后更新初始状态对象,最后返回更新后的状态对象。

TypeScript 代码实现

// 定义初始状态对象类型
type InitialState = Record<string, any>;
// 定义配置对象类型
type Config = {
    skipStrategies?: string[];
};
// 定义策略函数类型
type StrategyFunction = (state: InitialState) => InitialState;

// 主函数,基于策略模式
function executeStrategies(
    initialState: InitialState,
    config: Config = {},
    ...strategies: StrategyFunction[]
): InitialState {
    let state = {...initialState };
    const { skipStrategies = [] } = config;
    strategies.forEach(strategy => {
        const strategyName = strategy.name;
        if (!skipStrategies.includes(strategyName)) {
            state = strategy(state);
        }
    });
    return state;
}

// 示例策略函数
function addPropertyStrategy(state: InitialState): InitialState {
    return {...state, newProperty: 'Added value' };
}

function modifyPropertyStrategy(state: InitialState): InitialState {
    if ('existingProperty' in state) {
        return {...state, existingProperty: state.existingProperty + ' modified' };
    }
    return state;
}

// 示例使用
const initial: InitialState = { existingProperty: 'Initial value' };
const config: Config = { skipStrategies: ['modifyPropertyStrategy'] };
const result = executeStrategies(initial, config, addPropertyStrategy, modifyPropertyStrategy);
console.log(result);