Typescript 为递归数据定义数据类型的工作不正确

我在为数据定义适当的

类型时遇到了一个问题。我有一个包含以下数据的对象数组，我的任务是根据数据的结构给出适当的
类型

export const DashboardSections = [
    {
        name: 'Dashboard',
        sectionItems: [
            {
                title: 'Dashboard',
                icon: 'FaHome',
                path: adminUrl,
                type: 'link',
                active: true,
                children: [],
            },
            {
                title: 'Products',
                icon: 'FaBox',
                path: `${adminUrl}/products`,
                type: 'sub',
                active: false,
                children: [
                    {
                        path: `${adminUrl}/products`,
                        title: 'Products',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    {
                        path: `${adminUrl}/categories`,
                        title: 'Categories',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    // Tags are more specific (describe your posts in more detail)
                    {
                        path: `${adminUrl}/tags`,
                        title: 'Tags',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    {
                        path: `${adminUrl}/attributes`,
                        title: 'Attributes',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                ],
            },
            {
                title: 'Menus',
                icon: 'FaThLarge',
                path: `${adminUrl}/menus`,
                type: 'link',
                active: false,
                children: [],
            },
        ],
    },
    {
        name: 'System',
        sectionItems: [
            {
                title: 'Appearance',
                icon: 'FaPalette',
                path: `${adminUrl}/sliders`,
                type: 'sub',
                active: false,
                children: [],
            },
        ],
    },
];

我认为根项之后的数据具有递归结构。所以我定义了
类型
，如下所示

type link = 'link' | 'sub';

type rootDashItem = {
    /** Title of the root item */
    title: string;
    /** Only root item could contain a svg **/
    icon: string;
    /** Path of the root item */
    path: string;
    /** Root item could be a 'link' i.e. don't have any children(empty array) or 'sub' means has array of children. */
    type: link;
    /** Item would be active or not */
    active: boolean;
    /** Contain array of sub items */
    children: subDashItem[];
};


type subDashItem = {
    title: string;
    path: string;
    type: link;
    active: boolean;
    children: subDashItem[];
};


export type dashSection = {
    name: string;
    sectionItems: rootDashItem[];
};

但是当我尝试在其他地方重用
类型时

const items = DashboardSections.map((section: dashSection ) => {
     return section.sectionItems.filter((item: rootDashItem) => {
        if (item.active) {
            return {...item, section: section.name}
        }
    });

Linter在此行
DashboardSections.map（（section:dashSection）
上抛出错误

我做错了什么？为递归结构定义类型的更好方法是什么？

完整代码：

const adminUrl = "http://localhost:3000/admin";


//#region Types

type link = 'link' | 'sub';

type subDashItem = {
    title: string;
    path: string;
    type: link;
    active: boolean;
    children: subDashItem[];
};



type rootDashItem = {
    /** Title of the root item */
    title: string;
    /** Only root item could contain a svg **/
    icon: string;
    /** Path of the root item */
    path: string;
    /** Root item could be a 'link' i.e. don't have any children(empty array) or 'sub' means has array of children. */
    type: link;
    /** Item would be active or not */
    active: boolean;
    /** Contain array of sub items */
    children: subDashItem[];
};




export type dashSection = {
    name: string;
    sectionItems: rootDashItem[];
};
//#endregion Types


//#region Item Structure
export const DashboardSections = [
    {
        name: 'Dashboard',
        sectionItems: [
            {
                title: 'Dashboard',
                icon: '',
                path: adminUrl,
                type: 'link',
                active: true,
                children: [],
            },
            {
                title: 'Products',
                icon: '',
                path: `${adminUrl}/products`,
                type: 'sub',
                active: false,
                children: [
                    {
                        path: `${adminUrl}/products`,
                        title: 'Products',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    {
                        path: `${adminUrl}/categories`,
                        title: 'Categories',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    // Tags are more specific (describe your posts in more detail)
                    {
                        path: `${adminUrl}/tags`,
                        title: 'Tags',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                    {
                        path: `${adminUrl}/attributes`,
                        title: 'Attributes',
                        type: 'link',
                        active: false,
                        children: [],
                    },
                ],
            },
            {
                title: 'Menus',
                icon: '',
                path: `${adminUrl}/menus`,
                type: 'link',
                active: false,
                children: [],
            },
        ],
    },
    {
        name: 'System',
        sectionItems: [
            {
                title: 'Appearance',
                icon: '',
                path: `${adminUrl}/sliders`,
                type: 'sub',
                active: false,
                children: [],
            },
        ],
    },
];

//#endregion Item Structure

// Challenge is to take those root items which are active with its corresponding section title
const items = DashboardSections.map((section: dashSection ) => {
     return section.sectionItems.filter((item: rootDashItem) => {
        if (item.active) {
            return {...item, section: section.name}
        }
    });

});

console.log(items);

您只需对
仪表板部分的类型进行注释
：

export const DashboardSections: Array<dashSection> = [/*...*/]

导出常量仪表板部分：数组=[/*…*/]

然后修复
节.sectionItems.filter（（item:rootDashItem）=>…
）中的筛选器回调。筛选器函数应返回
布尔值
。因此，您可能希望按
项.active
进行筛选，然后根据需要再次映射
以转换项

After annotate
export const Dashboard Sections:dashSection[]
linter正在重写所有属性。但不知道我们为什么这样做？您将采取什么方法来定义给定结构的类型？我不确定您所说的“linter正在重写所有属性”是什么意思。我更新了答案，并添加了指向一些代码更正的链接。
export const DashboardSections: Array<dashSection> = [/*...*/]