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

2023年12月20日 409次阅读

似乎有两种方法可以在Typescript中的接口中声明一个命名函数：

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

两个问题：

> foo和bar函数有什么区别？
>为什么只有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较老的答案说它们是等效的,除了可能超载.

最佳答案 它们都有效并生成相同的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'.

总结一下：

> foo和bar函数有什么区别？

代码完成(反式)编译后,没有.之前,打字稿使用baras属性,fpo作为函数.

>为什么只有bar才能有readonly修饰符？

因为函数不能有readonly修饰符

点赞