typescript : `{ key(): type }` 与 `{ key: () => type }`

Question

一个同事刚刚在 PR 中写了这个，我很惊讶它能工作，因为我从未见过语法。

这些有什么区别吗？

type x = {
    foo(): void;
    bar: () => void;
}

const x: x = {
    foo: () => { },
    bar: () => { }
}

playground link

Answer 1

第一个 (foo(): void;) 是方法定义，第二个 (bar: () => void;) 是字段定义恰好是一个函数类型 (() => void;)

明显的区别是在 intelisene 中用于代码完成的图标。

在大多数情况下，功能上没有区别。对于类，方法被分配给原型(prototype)，而字段通常被分配给实例，但这只是一个对象类型，因此函数分配的位置实际上取决于执行实现的对象，而不是类型本身。

就类型而言，最大的区别是 strictFunctionTypes 下的行为 ( pr )。它的要点是方法的行为是双变的，而字段的行为是逆变的，所以下面的代码中只有一个是错误的:

type x = {
    foo(x: number | string): void;
    bar: (x: number | string) => void;
}

const x: x = {
    foo: (x: number) => { },// this is fine, methods are bivariant 
    bar: (x: number) => { } // err here, fields are contravariant  
}