MST

星途 面试题库

面试题:TypeScript类型系统在复杂变量声明场景下的深度剖析

考虑一个复杂的前端应用场景,需要管理用户数据,用户数据包括基本信息(姓名、年龄等)、权限信息(角色、可访问功能列表)以及操作记录(操作时间、操作内容等)。这些信息可能来自不同的API接口,且数据结构可能存在嵌套和可选属性。请设计一套TypeScript类型定义来准确描述这些用户数据,要求合理使用类型别名、接口、泛型等高级特性,确保类型的准确性和扩展性。同时,编写一段代码模拟从不同接口获取数据并合并为完整用户数据对象的过程,展示如何在变量声明和操作中利用你定义的类型系统。
47.4万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

1. 类型定义

// 基本信息类型别名
type BasicInfo = {
    name: string;
    age: number;
};

// 权限信息类型别名
type PermissionInfo = {
    role: string;
    accessibleFunctions: string[];
};

// 操作记录类型别名
type OperationRecord = {
    operationTime: string;
    operationContent: string;
};

// 用户数据接口,使用联合类型表示操作记录可能是可选的
interface UserData {
    basicInfo: BasicInfo;
    permissionInfo: PermissionInfo;
    operationRecords?: OperationRecord[];
}

2. 模拟获取数据并合并的代码

// 模拟从不同API获取数据的函数
function getBasicInfo(): BasicInfo {
    return {
        name: "John Doe",
        age: 30
    };
}

function getPermissionInfo(): PermissionInfo {
    return {
        role: "admin",
        accessibleFunctions: ["function1", "function2"]
    };
}

function getOperationRecords(): OperationRecord[] | undefined {
    return [
        {
            operationTime: "2023-01-01",
            operationContent: "Performed action"
        }
    ];
}

// 合并数据为完整用户数据对象
function mergeUserData(): UserData {
    const basic = getBasicInfo();
    const permission = getPermissionInfo();
    const operations = getOperationRecords();

    return {
        basicInfo: basic,
        permissionInfo: permission,
        operationRecords: operations
    };
}

// 声明变量并利用定义的类型系统
const user: UserData = mergeUserData();
console.log(user);