面试题：TypeScript 和 JSDoc 协同处理复杂数据结构

Question

给定一个复杂的数据结构，例如一个表示多层嵌套菜单的数据，菜单对象包含 'label'（字符串）、'children'（是一个同样结构的菜单对象数组）、'isActive'（布尔值）等属性。请用 TypeScript 和 JSDoc 协同的方式，实现对这个数据结构的类型定义，并且编写一个函数，该函数接收这个菜单数据结构，返回所有激活状态（isActive 为 true）的菜单项的 label 组成的数组。阐述在这个过程中如何利用两者优势进行高效开发。

Answer 1

1. 类型定义

/**
 * 菜单对象类型定义
 * @typedef {Object} MenuItem
 * @property {string} label - 菜单项的标签
 * @property {MenuItem[]} [children] - 子菜单项数组，可选
 * @property {boolean} isActive - 菜单项是否激活
 */

/**
 * 菜单数据类型，为 MenuItem 数组
 * @typedef {MenuItem[]} MenuData
 */

2. 实现函数

/**
 * 获取所有激活状态的菜单项的 label 组成的数组
 * @param {MenuData} menu - 菜单数据结构
 * @returns {string[]} 所有激活状态菜单项的 label 组成的数组
 */
function getActiveLabels(menu: MenuData): string[] {
    let result: string[] = [];
    function traverse(item: MenuItem) {
        if (item.isActive) {
            result.push(item.label);
        }
        if (item.children) {
            item.children.forEach(child => traverse(child));
        }
    }
    menu.forEach(item => traverse(item));
    return result;
}

3. 利用两者优势进行高效开发

• JSDoc 的优势：
  • 文档化：通过 JSDoc 注释，可以为代码添加详细的文档说明，让其他开发者能够快速理解 MenuItem 类型的结构以及 getActiveLabels 函数的功能、参数和返回值，提高代码的可维护性和可理解性。
  • 代码导航：在大型项目中，借助 JSDoc 可以方便地进行代码导航，快速定位到相关类型和函数的定义与使用。
• TypeScript 的优势：
  • 类型检查：TypeScript 提供了静态类型检查，在开发过程中能及时发现类型不匹配的错误，比如在调用 getActiveLabels 函数时传入了不符合 MenuData 类型的数据，编辑器或构建工具就能给出错误提示，大大减少运行时错误。
  • 代码智能提示：在编写代码时，TypeScript 能根据类型定义为开发者提供智能提示，提高编码效率，例如在访问 MenuItem 的属性时，编辑器能自动提示出 label、children 和 isActive 等属性。
• 协同优势：两者协同使用，JSDoc 负责文档层面的描述，TypeScript 负责类型层面的保障，使得代码既易于理解又具有较高的可靠性，从而实现高效开发。