使用Type类型初始化值访问器方法时遇this.onchange is not a function错误

首先咱们先聚焦问题：你已经用TypeScript定义了回调类型和注册方法，但调用this.onChange时触发了「不是函数」的报错。这大概率是回调未正确注册、this指向丢失，甚至是拼写细节出了问题，咱们一步步来排查解决：

可能的原因及对应解决方案 #

1. 先确认回调已被正确注册 #

你必须在调用this.onChange()之前，先调用registerOnChange()传入有效的回调函数。如果跳过注册直接调用，this.onChange会是undefined，自然会触发报错。

举个正确的使用示例：

// 假设你的类实例是formControl
const formControl = new YourClass();

// 先注册回调逻辑
formControl.registerOnChange((value) => {
  console.log('当前值更新为:', value);
});

// 之后再调用onChange
formControl.onChange('新的输入值');

2. 给回调属性加兜底空函数 #

如果担心出现「未注册就调用」的场景，可以给onChange和onTouch设置默认的空函数兜底，避免直接调用undefined报错：

type TOnChangeCallBack = (value: string) => void;
type TOnTouchCallBack = () => void;

class YourClass {
  // 初始化时设置空函数兜底
  onChange: TOnChangeCallBack = () => {};
  onTouch: TOnTouchCallBack = () => {};

  registerOnChange(fn: TOnChangeCallBack): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: TOnTouchCallBack): void {
    this.onTouch = fn;
  }

  // 比如一个触发值变更的方法
  handleValueChange(newValue: string) {
    this.onChange(newValue); // 即使没注册也不会报错
  }
}

3. 排查this指向丢失问题 #

如果你的registerOnChange方法被当作回调传递（比如绑定到DOM事件），很容易丢失this指向，导致注册时无法正确赋值给实例的onChange属性。可以用两种方式解决：

方式一：用箭头函数定义注册方法

箭头函数会自动绑定当前实例的this，避免指向丢失：

class YourClass {
  onChange: TOnChangeCallBack = () => {};
  onTouch: TOnTouchCallBack = () => {};

  // 箭头函数自动绑定this
  registerOnChange = (fn: TOnChangeCallBack): void => {
    this.onChange = fn;
  };

  registerOnTouched = (fn: TOnTouchCallBack): void => {
    this.onTouch = fn;
  };
}

方式二：在构造函数中手动绑定this

class YourClass {
  onChange: TOnChangeCallBack = () => {};
  onTouch: TOnTouchCallBack = () => {};

  constructor() {
    // 把方法的this绑定到当前实例
    this.registerOnChange = this.registerOnChange.bind(this);
    this.registerOnTouched = this.registerOnTouched.bind(this);
  }

  registerOnChange(fn: TOnChangeCallBack): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: TOnTouchCallBack): void {
    this.onTouch = fn;
  }
}

4. 检查拼写大小写！ #

注意你报错的是this.onchange（小写c），但代码里定义的是onChange（大写C）！这是非常容易忽略的细节错误——如果调用时写错了大小写，自然找不到对应的属性，会提示「不是函数」。

一定要确保调用的属性名和定义完全一致：

// ❌ 错误写法：小写c
this.onchange('测试值'); 

// ✅ 正确写法：大写C
this.onChange('测试值');

总结 #

最常见的问题就是未注册就调用回调、this指向丢失，或是大小写拼写错误，按照上面的步骤排查，应该就能解决问题啦。

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