0

I have an array:

const commandsBarImitation = [
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}},
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}},
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}},
];

There is also a function that renders a list of components, and takes this array as an argument:

interface IPropsCommandBarTemplates {
    isNeedLogoIcon?: boolean;
    hasList: boolean;
    logoName?: string;
    itemText?: string;
}
export const renderToolbarCommandItems = <T, >(itemDataArr: Array<IPropsCommandBarTemplates>) => {
    return itemDataArr.map((item, i) => {
        return (
            <Item
                cssClass={'testClass'}
                key={i}
                locateInMenu={'auto'}
                // showText={item.location !== 'after' ? 'always' : 'inMenu'}
                // {...item}
                // render={item.location !== 'after'  ?  () =>
                //     <CommandBarItemTemplates
                //         itemText={'Добавить'}
                //         isNeedLogoIcon
                //         hasList={true}
                //         logoName={'a-solid fa-ban-bug'}
                //     /> : undefined}
            />)
    })}

but when I call the function, passing an argument of the wrong type, the compiler does not error:

const commandsBarImitation = [
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}, as: 'lalalend', asdasd: 2},
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}, tt: 'tt'},
    {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}},
];
renderToolbarCommandItems(commandsBarImitation)

Properties as: 'lalalend' or asdasd: 2 do not exist in the IPropsCommandBarTemplates interface. So why does the function take an argument with the wrong type and how can this be fixed?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
AshBadCoder
  • 47
  • 5
  • It's **not** the wrong type. All of the props it needs (which is actually only one, they're mostly optional) _are_ defined, the fact that there are _others_ (which it can't access, as they're not available through the interface it receives) isn't really relevant. TypeScript does do _"excess property checking"_ in some cases, but for that you'd need an explicit type to check against: https://tsplay.dev/N71bGW – jonrsharpe Jun 07 '22 at 11:33
  • but why if it's not an array, then the function checks the type of the argument? https://www.typescriptlang.org/play?ssl=9&ssc=52&pln=1&pc=1#code/JYOwLgpgTgZghgYwgAgJIAUoHsAOBnAYSwFti4QATAITigBUJicAbOSPZAbwChk-lgeAHIQIFADJYA5llQIsIAPwAuZACMsWZhHIBuXvwAWcPOMFhVGrTpD7+yZtKxC4xCCuR4wUUFLv9gSGIGAA8wDy8fED9uAF99bhgAVxAEMGAFZCgISmg6TWY1WiJScgpUILwARgAKWilVDGx8ErJKGnpGFjYIPABKVQA3LGAKLljubNz6AqKoVrKKxmqazmNTc1VvJIgAGk88VQByI9i+7m4gA – AshBadCoder Jun 07 '22 at 11:47
  • That's the same as the example I already shared - when you inline the value, TypeScript can apply excess property checks. When you let it infer the type in a separate context, it can't: https://tsplay.dev/Nrn2oN. – jonrsharpe Jun 07 '22 at 11:48
  • I don't fully understand how it works) https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIAUoHsAOBnAYSwFti4QATAITigBUJicAbOSPZAbwChk-lgeAHIQIFADJYA5llQIsIAPwAuZACMsWZhHIBuXvwAWcPOMFhVGrTpD7+yZtKxC4xCCuR4wUUFLv9gSGIGAA8wDy8fED9uAF99bhgAVxAEMGAFZCgISmg6TWY1WiJScgpUILwARgAKWilVDGx8ErJKGnpGFjYIPABtAF0ASlUANyxgCi5Y7mzc+gKiqFayisZqmr7OY1NzVW8kiAAaTzxVAHJz2OHubiA – AshBadCoder Jun 07 '22 at 11:50
  • Does this answer your question? [Forcing excess-property checking on variable passed to TypeScript function](https://stackoverflow.com/questions/54775790/forcing-excess-property-checking-on-variable-passed-to-typescript-function) – jonrsharpe Jun 07 '22 at 11:52
  • got it man, thans you clarified the situation - the answer lies in 'inlineness': https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIAUoHsAOBnAYSwFti4QATAITigBUJicAbOSPZAbwChk-lgeAHIQIFADJYA5llQIsIAPwAuZACMsWZhHIBuXvwAWcPOMFhVGrTpD7+yZtKxC4xCCuR4wUUFLv9gSGIGAA8wDy8fED9uAF99bTBkOGQAXmQAbU5jU3NVbwBXCAAaTzxVAHIK2IBdbhgCkAQwYAVkKAhKaDpNZjVaIlJyClQgvABGAApaKVUMbHxBskoaekYWNgg8DJqASlUANyxgCi5Y7g6u+l7+qCXh0cYJ6d39biA – AshBadCoder Jun 07 '22 at 11:54

0 Answers0