数组中的联合类型 - TypeScript 不显示错误

Question

我正在使用 TypeScript 2.8.1 在 Angular 5 中处理菜单。

我想将类型添加到验证传入配置中，但是当我添加不正确的属性（例如 uncorrectData）时，没有任何反应。

为什么 TS 不显示错误？

示例代码：

type MenuElement = MenuGroup | MenuItem;

interface MenuGroup {
    id: number;
    name: string;
    icon?: string;
    items: MenuItem[];
}

interface MenuItem {
    id: number;
    name: string;
    url: string;
}

const menuData = [
    {
        id: 1,
        name: 'category',
        icon: 'star',
        items: [
            {
                id: 1,
                name: 'subcategoryOne',
                url: 'urlOne'
            },
            {
                id: 2,
                name: 'subcategoryTwo',
                url: 'urlTwo'
            }
        ]
    },
    {
        id: 2,
        name: 'categoryTwo',
        url: 'urlThree',
        undesirableData: 'text' // undesirable data 
    }
];

export class MainComponent {
    public appMenu: Array<MenuElement>;

    constructor() {
        this.appMenu = this.createMenu(menuData);
    }

    createMenu(menu: Array<MenuElement>) {
        return menu;
    }
}

Answer 1

要验证您正在创建的对象字面量，您需要在 const 上实际指定类型，否则将根据用法推断出 const 类型。

const menuData: MenuElement[] = [ ... ];

通过调用 this.createMenu(menuData) 时不会出现错误，因为 menuData 与 MenuElement[] 兼容，即使它确实有一些额外的字段，对象字面量也会针对额外的内容进行验证仅在创建时的属性。例如：

let o  = {
    id: 2,
    name: 'categoryTwo',
    url: 'urlThree',
    undesirableData: 'text'
}
let m :MenuItem = o;  //valid structurally compatible

let m2: MenuItem  = { // invalid literal is checked for extra properties
    id: 2,
    name: 'categoryTwo',
    url: 'urlThree',
    undesirableData: 'text' 
}

如果您指定具有不兼容类型的已知属性，则如果存在类型不兼容，您将收到错误，但如果您将对象文字分配给明确键入的 variable/parameter/field，您只会收到额外属性的错误MenuItem

数组中的联合类型 - TypeScript 不显示错误

Union Types in Array - TypeScript don't show errors

typescript

types

typescript2.8