Question

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

我想添加类型来验证传入配置，但是当我添加INCORRECT属性（例如unwantedData）时没有任何反应。

为什么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' 
}

如果您指定了具有不兼容类型的已知属性，则会出现类型不兼容的错误，但如果将对象文字分配给明确键入为{{0}的变量/参数/字段，则只会获得额外属性的错误1}}

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

1 个答案: