TypeScript中含函数签名与readonly属性的接口疑问

嘿，这个问题我当初刚接触TypeScript的时候也懵过，来给你讲明白～

你看到的这个test接口是TypeScript里的混合类型接口——它既定义了一个函数的签名（要求这个对象可以像函数一样被调用，参数是number类型，返回值也是number类型），同时又要求这个对象必须拥有一个只读属性b（类型为number）。简单来说，实现这个接口的东西，得既是个符合要求的函数，又是个带有只读b属性的对象。

为啥你的测试代码不对？ #

你写的这段代码有几个问题：

• 箭头函数没有自己的this，你写的this.b根本不是指向这个函数对象本身，而是外层的上下文（比如全局作用域或者类的this）；
• 你只是把一个箭头函数赋值给了c，但这个函数对象本身并没有b属性，完全没满足接口的要求；
• 就算你给函数加上b属性，因为接口里b是readonly，你也不能在函数内部去修改它（而且函数内部的this本来也不指向函数对象本身）。

正确的实现方式 #

你需要创建一个同时是函数又带有b属性的对象，这里推荐两种写法：

方式1：用Object.assign合并函数与属性

const c: test = Object.assign((a: number) => a, { b: 1 });

// 这里如果尝试修改c.b会直接报错，因为它是只读属性
// c.b = 2; // 错误：无法为“b”赋值，因为它是只读属性。

方式2：对象字面量配合类型断言（更直观但需注意类型安全）

const d: test = {
  (a: number): number {
    return a;
  },
  b: 1
} as test;

其实这种混合类型在日常开发中不算常用，但TypeScript允许这么做，主要是为了描述一些特殊的JavaScript对象——比如有些内置函数本身就带有属性（比如Math.random是个函数，但你其实可以给它添加自定义属性，只是平时很少用到而已）。

备注：内容来源于stack exchange，提问作者kimsangdu