typescript - Typescript接口(interface)声明中命名函数语法的区别

Question

似乎有两种方法可以在 Typescript 的接口(interface)中声明命名函数:

export interface Zoo {
  foo(): string
  readonly bar: () => string,
}

两个问题:

1. foo 和 bar 函数有什么区别？
2. 为什么只有 bar 可以有 readonly 修饰符？

更新:

这是一个更长的例子:

export interface Zoo {
  foo(): string
  readonly bar: () => string,
}

export const x: Zoo = {
  foo: () => "a",
  bar: () => "a",
};

x.foo = () => "b"; // No error
x.bar = () => "b"; // Error: Cannot assign to "bar"

对我来说，这两种声明方式似乎是等价的，除了第二种方式可以设为只读。

我还找到了this较早的回答说它们是等效的，除了可能会过载。

Answer 1

它们都是有效的并且生成相同的 Javascript 代码:

exports.x = {
    foo: function () { return "a"; },
    bar: function () { return "a"; }
};

但实际上您只能将 readonly 修饰符分配给该属性。

旧的答案仍然有效，第一个可以用于重载，第二个不能:

a.ts(2,5): error TS2300: Duplicate identifier 'myFunction'.
a.ts(3,5): error TS2300: Duplicate identifier 'myFunction'.
a.ts(3,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'myFunction' must be of type '(s: string) => void', but here has type '(s: number) => void'.

总结:

1. foo 和 bar 函数有什么区别？

代码经过(反)编译后，没有。之前，typescript 使用 bar 作为属性，使用 fpo 作为函数。

1. 为什么只有 bar 可以有 readonly 修饰符？

因为函数不能有readonly修饰符