TypeScript接口行为差异：为何两段代码报错情况不同？

先看两组代码的行为差异：

代码1：无报错 #

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// logs "12, 26"
const point = { x: 12, y: 26, z:"newfield" };
logPoint(point);

代码2：直接传对象字面量时报错 #

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig) {
  return {
    color: config.color || "red",
    area: config.width ? config.width * config.width : 20,
  };
}

// 报错：Object literal may only specify known properties, and 'z' does not exist in type 'SquareConfig'.
let mySquare = createSquare({ color: "red", width: 100 ,  z:"newfield"});

特殊情况：先赋值给变量再传参，报错消失 #

const val = { color: "red", width: 100, z:"newfield"}
 
let mySquare = createSquare(val);

原因解释 #

这是TypeScript的**对象字面量超额属性检查（Excess Property Checks）**机制导致的：

• 当你直接将对象字面量作为函数参数传入时，TypeScript会启动额外的严格检查：不允许字面量包含目标类型中未定义的属性。这个规则是为了帮你排查拼写错误、意外传入多余属性这类问题，属于TypeScript在结构类型系统之外额外添加的健壮性检查。
• 当你把对象先赋值给一个变量时，TypeScript会先推断出这个变量的完整类型（比如上面的val会被推断为{ color: string; width: number; z: string }），之后将变量传给函数时，只会执行普通的结构类型兼容性检查：只要变量的类型包含函数参数要求的所有属性（不管有没有额外属性），就会通过检查——这是TypeScript鸭子类型系统的核心逻辑，只要属性匹配就兼容。

对应到例子：

• 代码1中，point的类型包含Point要求的x、y属性，结构兼容，所以通过检查。
• 代码2直接传对象字面量时，超额属性检查发现z不在SquareConfig的定义中，所以报错；而赋值给val后，val的类型覆盖了SquareConfig的所有可选属性，结构兼容，因此不再触发报错。

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