MST

星途 面试题库

面试题:TypeScript 高级类型在复杂业务场景下的深度优化

在一个大型前端项目中,涉及到复杂的权限管理系统。权限有多种层级(如访客、普通用户、管理员、超级管理员等),不同权限层级对不同功能模块(如用户管理、文件管理、系统设置等)有不同的操作权限(如查看、编辑、删除等)。请使用 TypeScript 的高级类型(如映射类型、条件类型、递归类型等)构建一套完整的类型系统,精准描述权限与功能模块之间的关系,并且能在代码编写过程中通过类型检查保证权限控制的正确性和安全性,同时尽可能提高代码的可维护性和扩展性。
35.0万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试
  1. 定义权限层级和功能模块
    // 权限层级
    type PermissionLevel = '访客' | '普通用户' | '管理员' | '超级管理员';
    // 功能模块
    type FunctionModule = '用户管理' | '文件管理' | '系统设置';
    // 操作权限
    type OperationPermission = '查看' | '编辑' | '删除';
    
  2. 使用映射类型构建权限与功能模块关系
    // 构建权限与功能模块操作权限的映射
    type PermissionMap = {
        [P in PermissionLevel]: {
            [FM in FunctionModule]: OperationPermission[];
        };
    };
    
  3. 示例权限配置
    const permissionConfig: PermissionMap = {
        '访客': {
            '用户管理': ['查看'],
            '文件管理': ['查看'],
            '系统设置': []
        },
        '普通用户': {
            '用户管理': ['查看'],
            '文件管理': ['查看', '编辑'],
            '系统设置': []
        },
        '管理员': {
            '用户管理': ['查看', '编辑', '删除'],
            '文件管理': ['查看', '编辑', '删除'],
            '系统设置': ['查看', '编辑']
        },
        '超级管理员': {
            '用户管理': ['查看', '编辑', '删除'],
            '文件管理': ['查看', '编辑', '删除'],
            '系统设置': ['查看', '编辑', '删除']
        }
    };
    
  4. 定义获取权限的函数类型
    // 获取特定权限层级在特定功能模块下的操作权限
    type GetPermissions = <P extends PermissionLevel, FM extends FunctionModule>(
        level: P,
        module: FM
    ) => PermissionMap[P][FM];
    const getPermissions: GetPermissions = (level, module) => permissionConfig[level][module];
    
  5. 使用条件类型增强类型安全性(例如,检查用户是否有特定操作权限)
    // 检查用户是否有特定操作权限
    type HasPermission = <P extends PermissionLevel, FM extends FunctionModule, OP extends OperationPermission>(
        level: P,
        module: FM,
        operation: OP
    ) => OP extends PermissionMap[P][FM][number]? true : false;
    const hasPermission: HasPermission = (level, module, operation) => {
        return getPermissions(level, module).includes(operation);
    };
    

这样,通过以上 TypeScript 的高级类型定义,可以精准描述权限与功能模块之间的关系,并且在代码编写过程中通过类型检查保证权限控制的正确性和安全性,同时由于模块化的类型定义方式,也具有较好的可维护性和扩展性。例如,当添加新的权限层级、功能模块或操作权限时,只需在相应的类型定义处进行扩展即可。