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

Mar*_*ahn 4 typescript

一位同事刚刚在PR中编写了此代码,但令我惊讶的是,因为我从未见过该语法。

这些之间有什么区别吗?

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

const x: x = {
    foo: () => { },
    bar: () => { }
}
Run Code Online (Sandbox Code Playgroud)

游乐场链接

Tit*_*mir 6

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

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

在大多数情况下,功能上没有区别。对于类,方法是分配给原型的,而字段通常是分配给实例的,但这只是一个对象类型,因此分配功能的地方实际上取决于对象,而不是类型本身。

就类型而言,最大的区别是strictFunctionTypespr)下的行为。其要点是方法的行为是双向的,而字段的行为是双向的,因此下面的代码中只有一个是错误:

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  
}
Run Code Online (Sandbox Code Playgroud)