Typescript接口声明中命名函数语法的区别

Question

It seems there are two ways to declare a named function in an interface in Typescript:

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

Two questions:

1. What is the difference between the foo and the bar functions?
2. Why can only bar have the readonly modifier?

UPDATE:

Here is a longer example:

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"

To me it seems that both ways of declaring are equivalent except for that the second way can be made readonly.

I also found this older answer saying they are equivalent except for the possibility to overload.

Answer 1

Both of them are valid and generate the same Javascript code:

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

But indeed you can assign the readonly modifier only to the property.

And the old answer is still valid, the first one can be use for overloaded, the second one no:

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'.

To summarize:

1. What is the difference between the foo and the bar functions?

After the code has been (trans)compiled, none. Before, typescript uses bar as a property, and fpo as a function.

2. Why can only bar have the readonly modifier?

Because function cannot have readonly modifier