TypeScript中如何为类方法指定预先定义的函数类型

为变量指定函数类型的实现非常简单，但要为类中的方法复用已定义的函数类型，应该使用什么语法？

前置定义 #

首先已经抽象好了可复用的函数类型：

type SetDog = (id: string) => void

给普通变量绑定该类型的写法非常直观：

const setDog: SetDog = (id) => setState(dog);

现在需要把这个类型复用到类的setDog方法上，初始类结构如下：

class Dog {
  setDog(id) {
    setState(id);
  }
}

排除方案：直接在方法上重复编写参数、返回值类型不符合复用要求，不是目标实现，示例如下

// 不推荐：重复写类型定义，无法复用已抽象的SetDog类型
class Dog {
  setDog(id: string): void {
    setState(id);
  }
}

有两种合规写法可以直接复用已定义的SetDog类型，不需要重复声明参数和返回值规则：

方案1：类属性箭头函数写法 #

和普通变量的类型标注语法完全一致，把方法定义为类的实例属性即可：

class Dog {
  setDog: SetDog = (id) => {
    setState(id);
  }
}

该方案的特点：

• 语法简单，和普通变量类型标注逻辑一致，没有额外学习成本
• 箭头函数默认绑定类实例的this，不会出现事件回调、函数传参场景下的this指向丢失问题
• 方法挂载在每个类实例上，而非共享的原型对象上，实例量级极大时会有可忽略的微小内存开销

方案2：implements 接口约束写法 #

如果要保留类原型方法的定义形式，可以先定义类的结构接口，通过implements让TS自动推导方法的类型：

// 定义类的结构约束，直接复用已有的SetDog类型
interface DogClass {
  setDog: SetDog
}

class Dog implements DogClass {
  // 不需要手动写id和返回值的类型，TS会自动从DogClass推导校验
  setDog(id) {
    setState(id);
  }
}

该方案的特点：

• 方法定义在类原型上，所有类实例共享同一个方法引用，内存占用更低
• 支持一次性约束类的所有属性、方法类型，适合复杂类、多类同构的场景
• 简单场景下需要额外定义类接口，写法稍显冗余

语法提示：TS不支持直接在原型方法的定义位置给方法名加函数类型标注，类似setDog: SetDog(id) {}的写法会直接抛出语法错误，不要使用。

内容的提问来源于stack exchange，提问作者Budaa