TypeScript React中如何声明带属性函数及对应方法接口

报错原因 #

TypeScript 对类方法的默认类型推导仅覆盖函数的调用签名，不会自动识别开发者手动挂载到函数对象上的自定义属性，因此访问this.sdffsf.fff时，TS会判定该属性不存在于默认的Function类型上，抛出类型校验错误。

可行解决方式 #

• 方式1：显式声明带自定义属性的方法类型（推荐搭配Bind装饰器使用）
  给方法定义包含调用签名+自定义属性的对象类型，直接在类属性上标注类型，让TS完整识别方法的所有属性：

  // 定义带自定义属性的方法类型
  type CustomMethod = {
    (): void; // 对应方法本身的入参、返回值类型，可根据实际业务调整
    fff: string; // 挂载到方法上的自定义属性，按需补充类型
  };
  
  class DemoComponent extends React.Component {
    @Bind()
    sdffsf: CustomMethod = () => {
      // 方法内部逻辑
      this.sdffsf.fff = 'sdfsd'; // 此时不会再报类型错误
    };
  }
  

• 方式2：通过接口合并补全原型方法的类型
  如果要保留类原型方法的写法，可以利用TS的声明合并特性，提前给类实例补充方法的完整类型：

  // 和类同名的接口会自动合并到类的实例类型中
  interface DemoComponent {
    sdffsf: {
      (): void;
      fff: string;
    };
  }
  
  class DemoComponent extends React.Component {
    @Bind()
    sdffsf() {
      this.sdffsf.fff = 'sdfsd'; // 类型校验正常
    }
  }
  

开发提示：如果没有强需求必须把属性挂载到方法对象上，更推荐把相关状态存在组件实例属性或者state中，更符合React的常规开发范式，后续维护成本更低。

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