typescript：`{ key ()：类型}` vs `{ key：() =>类型}`

Question

一位同事刚刚在公关上写了这段代码，我很惊讶它能工作，因为我从来没有见过它的语法。

这两者之间有什么区别吗？

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

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

playground link

Answer 1

第一个(foo(): void;)是方法定义，第二个(bar: () => void;)是碰巧属于函数类型(() => void;)的字段定义

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

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

就类型而言，最大的区别是在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  
}

Answer 2

就只考虑类型而言，没有区别：

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


type Foo = x['foo'];
type Bar = x['bar'];
// both are () => void

通常，方法或箭头函数体内的this类型不是方法或箭头函数类型的一部分。