TypeScript中unknown箭头语法及=>符号含义技术问询

嘿，我来帮你把这个点掰明白！

首先先纠正下你对private onchange的理解：你说它是“包含字符串类型属性的对象”，其实更准确的描述是——这是一个私有对象变量，它的所有属性键都是字符串类型，而每个属性的值都是一个「无参数、返回值为void的函数」。对应的类型声明大概是这样的：

private onchange: { [key: string]: () => void };

这里的{ [key: string]: T }是TypeScript的索引签名语法，意思是这个对象可以有任意多个字符串键，每个键对应的值类型都是T（这里的T就是() => void）。

接下来重点解决你疑惑的=>符号：
这里的=>绝对不是ES6的箭头函数语法，而是TypeScript里用来定义函数类型的专属语法！

咱们分两种场景区分：

• 类型注解里的=>：用来描述一个函数的“类型签名”，格式是(参数类型列表) => 返回值类型。比如() => void就表示：一个没有参数、执行后没有返回值（或者返回undefined）的函数类型。它只是用来告诉TypeScript“这个位置需要符合这个签名的函数”，并不是实际的函数代码。
• ES6箭头函数里的=>：这是用来写实际的函数实现的，比如const log = () => console.log('hi')，这是一个能真正执行的函数，和类型描述完全是两码事。

给你举个完整的代码例子，一看就懂：

class Button {
  // 这里的=>是类型注解里的函数类型定义
  private onchange: { [key: string]: () => void };

  constructor() {
    this.onchange = {};
  }

  // 这里的callback参数类型就是() => void，要求传入符合签名的函数
  addListener(eventName: string, callback: () => void) {
    this.onchange[eventName] = callback;
  }

  trigger(eventName: string) {
    // 这里的()是执行函数，和类型里的=>没关系
    this.onchange[eventName]?.();
  }
}

// 这里的() => {}是ES6箭头函数实现，刚好符合() => void的类型要求
const btn = new Button();
btn.addListener('click', () => { console.log('按钮被点击啦！') });
btn.trigger('click');

总结一下核心区别：

• 类型里的=>：描述函数的“样子”（参数、返回值），是TypeScript的类型语法
• 箭头函数的=>：写具体的函数逻辑，是JavaScript的语法

这样应该就完全清楚啦！

内容的提问来源于stack exchange，提问作者Willem van der Veen