javascript - typescript -我在使用函数的返回值时遇到问题

Question

我想遍历一个数组，检查节点是否有较低的节点以及节点是否与用户的 Angular 色兼容。

我想我可能会使用“for (let entry of someArray)”来获取数组中节点的每个值，但是“someArray”是函数的返回值:

public menuList(): any {
    return [
        // SCHEDULER
        {
            route: ["", "scheduler"],
            name: "scheduler",
            moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"),
            title: "scheduler",
            nav: true,
            settings: {
                icon: "user",
                roles: ["Employee", "Admin"],
                pos: "left"
            }
        },

        // CLIENTS
        {
            route: "clients",
            name: "clients",
            moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
            title: "Clients",
            nav: true,
            settings: {
                icon: "user",
                roles: ["Employee", "Admin"],
                pos: "left",
                nav: [
                    {
                        route: "clients/ClientsList",
                        name: "clientList",
                        moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
                        href: "#clients/clientsList",
                        title: "Client List",
                        settings: {
                            icon: "list",
                            roles: ["Employee", "Admin"],
                        }
                    },
                    {
                        settings: {
                            roles: ["Employee", "Admin"],
                            divider: true,
                        }
                    },
                    {
                        route: "clients/create",
                        name: "newClient",
                        moduleId: PLATFORM.moduleName("../components/clients/newClient/newClient"),
                        href: "#clients/Create",
                        title: "Create Client",
                        settings: {
                            icon: "user",
                            roles: ["Employee", "Admin"],
                        }
                    }
                ]
            }
        },

        // JOBS
        {
            route: "jobs",
            name: "jobs",
            moduleId: PLATFORM.moduleName("../components/jobs/jobsList"),
            title: "Jobs",
            nav: true,
            settings: {
                icon: "list",
                roles: ["Employee", "Admin"],
                pos: "left"
            },
        },

        // ACCOUNTING

        // Accounting - 1st level route WITH SUBROUTES
        {
            route: "accounting",
            name: "accounting",
            moduleId: PLATFORM.moduleName("../components/accounting/ledgerEnquiry/ledgerEnquiry"),
            title: "Accounting",
            nav: true,
            settings: {
                icon: "usd",
                roles: ["Employee", "Admin"],
                pos: "left",
                nav: [
                    {
                        title: "Creditor Cost Invoices",
                        icon: "tasks",
                        nav: true,
                        roles: ["Employee", "Admin"],
                        settings: {
                            nav: [
                                {
                                    title: 'Creditor Payments',
                                    icon: 'usd',
                                    roles: ["Employee", "Admin"],
                                    settings: {
                                        nav: [
                                            {
                                                route: "accounting/creditorCostInvoices/payments/paymentsRegister",
                                                name: "paymentsRegister",
                                                moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/paymentsRegister/paymentsRegister"),
                                                href: '#accounting/creditorCostInvoices/payments/paymentsRegister',
                                                title: 'Payments Register',
                                                settings: {
                                                    icon: 'list',
                                                    roles: ["Employee", "Admin"]
                                                }
                                            },
                                            {
                                                settings: {
                                                    roles: ["Employee", "Admin"],
                                                    divider: true,
                                                }
                                            },
                                            {
                                                route: "accounting/creditorCostInvoices/payments/creditorPromptPayments",
                                                name: "promptPayments",
                                                moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/creditorPromptPayments/creditorPromptPayments"),
                                                href: '#accounting/creditorCostInvoices/payments/creditorPromptPayments',
                                                title: 'Creditor Prompt Payments',
                                                settings: {
                                                    icon: 'usd',
                                                    roles: ["Employee", "Admin"]
                                                }
                                            },
                                            {
                                                route: "accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices",
                                                name: "payments",
                                                moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices/payOutstandingCreditorInvoices"),
                                                href: '#accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices',
                                                title: 'Pay Outstanding Creditor Invoices',
                                                settings: {
                                                    icon: 'edit',
                                                    roles: ["Employee"/*, "Admin"*/]
                                                }
                                            },
                                        ],
                                    }
                                },
                            ]
                        }
                    },
                ]
            }
        }
    ]
}

调度器是一个节点，客户端是另一个节点，但客户端有一个包含三个节点的数组。

我想遍历它并创建一个新数组，如果任何节点不满足 Angular 色值，那么该节点将被排除在外，同时仍保持原始数组的深度结构。所以在 menuList()如果迭代此检查 Angular 色设置是否具有“Admin”并且它不会忽略该节点并且我得到一个过滤数组，其中仅包含其中具有“Admin”的那些节点。

我做了一个带有嵌套“for 循环”的怪物“for 循环”来尝试捕捉这个但失败了。

我现在想我会使用 let entry of someArray 但我收到错误:

Error TS2349 (TS) Cannot invoke an expression whose type lacks a call signature. Type 'any[]' has no compatible call signatures

但不确定如何解决这个问题......

有没有一种聪明的方法可以根据 role.includes("Admin") 等过滤这个数组，同时仍然保持结构？

更新

虽然我认为会有很多更好更简洁的方法，但我终于设法让它发挥作用。

我采取了在移动到下一个节点之前完全处理每个节点的观点，为此我使用了一个递归函数，为每个级别调用自身。

public userMenu(userName: string, userRole: string): any {
    let finishedRoleCheckedMenu = Array();
    let userMenuElements = Array();
    let returnedElement = {} as any;


    for (const key in this.menuList()) {
        returnedElement = this.processElement(this.menuList()[key], userRole);

        if (returnedElement !== 'undefined') {
            userMenuElements.push(returnedElement);
        }
    }

    for (let count = 0; count < this.routeMenuItems.length; count++) {
        if (!this.routeMenuItems[count].settings.divider) {
            userMenuElements.push(this.routeMenuItems[count]);
        }
    }

    return userMenuElements;
}


processElement(element: any, userRole: string) {
    let testedElement = {} as any;
    let settingsElement = {} as any;
    let navElements = Array();
    let navElement = {} as any;

    if (element.settings.roles.includes(userRole)) {

        for (const key in element) {
            if (key === "settings") {

                for (const settingsKey in element[key]) {
                    if (settingsKey === "nav") {

                        for (const navKey in element[key][settingsKey]) {

                            navElement = this.processElement(element[key][settingsKey][navKey], userRole); // recursive call.

                            if (navElement !== 'undefined') {
                                if (navElement.route) {  // Collect only those elements with routes.
                                    this.routeMenuItems.push(navElement); // For adding the total routes at the end.
                                }
                                navElements.push(navElement);
                            }
                        }
                        if (navElements.length > 0) {

                            settingsElement[settingsKey] = navElements;
                        }
                    } else {
                        settingsElement[settingsKey] = element[key][settingsKey];
                    }
                }
                testedElement[key] = settingsElement;
            } else {
                testedElement[key] = element[key];
            }
        }

        return testedElement;
    } else {
        return 'undefined';
    }
}

Answer 1

编译器提示调用者代码。特别是它计划对返回的数组执行的操作。这是因为您已将返回类型指定为“any”。也许数组的返回类型可能更合适。

就过滤数组而言，我认为您走在正确的轨道上，但是您可以通过使用映射或映射/归约模式稍微清理一下代码。