TypeScript传参不符合接口定义无编译报错原因及修复

TypeScript 采用结构类型系统，默认遵循鸭子类型判定逻辑：只要传入值包含目标类型要求的所有必选属性、且对应属性类型匹配，就会判定为类型兼容，额外存在的属性本身不会触发类型错误。
你遇到的无报错问题核心是两点：

• 多余属性检查（Excess Property Checking）是TS的特殊校验规则，仅在对象字面量直接赋值给显式标注类型的变量、或直接作为实参传入函数时才会触发。你的代码里先把数组赋值给了没有显式标注类型的commandsBarImitation变量，TS会自动为这个变量做类型推断：数组元素被推断为包含必选属性hasList: boolean（完全满足IPropsCommandBarTemplates的必选字段要求），同时携带你写的location/widget/as/asdasd等额外字段的类型。当你把这个预定义的变量传入函数时，因为结构上已经符合接口要求，TS自然不会抛错。
• 你在函数定义上声明了完全未使用的泛型参数<T>，虽然不是核心诱因，但会一定程度降低类型推断的严格度。

根据你的使用场景选以下任意一种即可：

• 方案1：给数组显式标注接口类型
  定义数组时直接声明其类型为IPropsCommandBarTemplates[]，此时给数组赋值对象字面量会直接触发多余属性检查，非法字段会立刻报错：

  const commandsBarImitation: IPropsCommandBarTemplates[] = [
      {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}, as: 'lalalend', asdasd: 2}, // 此处TS会直接提示as、asdasd为多余属性
      {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}, tt: 'tt'}, // 此处提示tt为多余属性
      {location:"before", locateInMenu:"auto", widget:"dxButton", hasList: true, options: {}},
  ];
  

• 方案2：用satisfies做轻量校验
  如果你既想校验数组符合接口结构，又不想丢失数组原有字段的类型信息，可以用TS 4.9及以上版本支持的satisfies运算符：

  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: {}},
  ] satisfies IPropsCommandBarTemplates[];
  

• 方案3：给函数加严格入参校验
  如果你希望从函数层面就禁止所有带多余属性的入参，不管调用方怎么传值都能触发校验，可以修改函数的类型定义，同时删掉没用的泛型参数：

  // 定义严格匹配工具类型，不允许存在目标类型之外的字段
  type ExactMatch<T, Target> = T extends Target 
    ? Exclude<keyof T, keyof Target> extends never 
      ? T 
      : never 
    : never;
  
  export const renderToolbarCommandItems = <T extends IPropsCommandBarTemplates>(
    itemDataArr: Array<ExactMatch<T, IPropsCommandBarTemplates>>
  ) => {
    // 原有函数逻辑保持不变
    return itemDataArr.map((item, i) => {
      return (
        <Item
          cssClass={'testClass'}
          key={i}
          locateInMenu={'auto'}
        />
      )
    })
  }
  

  改完之后，哪怕你先把数组赋值给变量再传入，只要元素包含接口未定义的字段，TS都会在函数调用处抛出类型错误。

内容的提问来源于stack exchange，提问作者AshBadCoder