TypeScript中两种接口声明的差异是什么？

先澄清一个误解：接口A里的foo: (x: number) => number只是定义了函数类型的属性，不强制实现必须用箭头函数；接口B的写法是方法签名，也不限制实现必须是普通函数。两者的核心差异主要在这几点：

1. 重载支持差异 #

接口B的方法签名写法天然支持函数重载：

interface B {
  foo(x: number): number;
  foo(x: string): string;
}

而接口A的属性式函数类型无法直接定义重载，只能通过联合类型或交叉类型间接实现，写法繁琐得多。

2. 类型兼容性规则不同 #

在TypeScript的类型检查中，方法签名和属性函数类型的兼容性逻辑有区别：

• 方法签名遵循双向兼容规则：子类的方法只要参数更宽松、返回值更具体，就能兼容父类的方法。
• 属性函数类型遵循普通属性的赋值兼容规则：必须严格匹配函数的参数和返回值类型，兼容性更严格。

3. 运行时this绑定（取决于实现方式） #

你提到的this差异，本质是实现时用箭头函数还是普通函数导致的，和接口定义本身无关：

• 不管是接口A还是B，给foo赋值普通函数，它都会有自己的this绑定；赋值箭头函数，则会捕获外层作用域的this。
• 但在类中实现时，属性式写法（比如接口A的风格）如果用箭头函数赋值，会把函数绑定到实例的this；而方法签名写法（接口B的风格）的普通方法，this由调用时的上下文决定。

举个例子：

class ImplA implements A {
  num = 10;
  // 箭头函数固定绑定实例this
  foo = (x: number) => x + this.num;
}

class ImplB implements B {
  num = 10;
  // 普通方法的this由调用场景决定
  foo(x: number) {
    return x + this.num;
  }
}

搜索建议 #

你可以在TypeScript官方文档里搜“method signatures vs function properties”或者“interface method compatibility”，也可以去TypeScript的GitHub讨论区查找相关议题，很多开发者会分享这类细节。另外，官方文档的「类型兼容性」章节里，专门提到了方法和函数属性的不同处理逻辑。

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